import { useComputed, useSignal, type ReadonlySignal } from '@preact/signals'
import type { JSX } from 'preact/jsx-runtime'

export const ShowMore = <T extends any>({
    items,
    pageSize,
    children,
}: {
    items: ReadonlySignal<T[]>
    pageSize: number
    children: (item: T) => JSX.Element
}) => {
    const $shownItems = useSignal(pageSize)

    const $paginatedItems = useComputed(() => {
        return items.value.slice(0, $shownItems.value)
    })

    return (
        <>
            {$paginatedItems.value.map(children)}
            <div class="show-more">
                {$shownItems.value < items.value.length && (
                    <button onClick={() => ($shownItems.value += pageSize)}>Mostra altri</button>
                )}
            </div>
        </>
    )
}