import {useListSearch} from "@/hooks/useListSearch";
import usePagination from "@/hooks/usePagination";
import {ReactNode} from "react";
import Checkbox from "../Low/Checkbox";
import Separator from "../Low/Separator";

interface Props<T> {
	list: T[];
	searchFields: string[][];
	pageSize?: number;
	firstCard?: () => ReactNode;
	renderCard: (item: T) => ReactNode;
}

export default function CardList<T>({list, searchFields, renderCard, firstCard, pageSize = 20}: Props<T>) {
	const {rows, renderSearch} = useListSearch(searchFields, list);

	const {items, page, renderMinimal} = usePagination(rows, pageSize);

	return (
		<section className="flex flex-col gap-4 w-full">
			<div className="w-full flex items-center gap-4">
				{renderSearch()}
				{renderMinimal()}
			</div>
			<div className="w-full h-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
				{page === 0 && !!firstCard && firstCard()}
				{items.map(renderCard)}
			</div>
		</section>
	);
}
