import Button from "@/components/Low/Button";
import {useMemo, useState} from "react";
import {BiChevronLeft} from "react-icons/bi";
import {BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight} from "react-icons/bs";

export default function usePagination<T>(list: T[], size = 25) {
	const [page, setPage] = useState(0);

	const items = useMemo(() => list.slice(page * size, (page + 1) * size), [page, size, list]);

	const render = () => (
		<div className="w-full flex gap-2 justify-between items-center">
			<div className="flex items-center gap-4 w-fit">
				<Button className="w-[200px] h-fit" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
					Previous Page
				</Button>
			</div>
			<div className="flex items-center gap-4 w-fit">
				<span className="opacity-80">
					{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
				</span>
				<Button className="w-[200px]" disabled={(page + 1) * size >= list.length} onClick={() => setPage((prev) => prev + 1)}>
					Next Page
				</Button>
			</div>
		</div>
	);

	const renderMinimal = () => (
		<div className="flex gap-4 items-center">
			<div className="flex gap-2 items-center">
				<button disabled={page === 0} onClick={() => setPage(0)} className="disabled:opacity-60 disabled:cursor-not-allowed">
					<BsChevronDoubleLeft />
				</button>
				<button disabled={page === 0} onClick={() => setPage((prev) => prev - 1)} className="disabled:opacity-60 disabled:cursor-not-allowed">
					<BsChevronLeft />
				</button>
			</div>
			<span className="opacity-80 w-32 text-center">
				{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
			</span>
			<div className="flex gap-2 items-center">
				<button
					disabled={(page + 1) * size >= list.length}
					onClick={() => setPage((prev) => prev + 1)}
					className="disabled:opacity-60 disabled:cursor-not-allowed">
					<BsChevronRight />
				</button>
				<button
					disabled={(page + 1) * size >= list.length}
					onClick={() => setPage(Math.floor(list.length / size))}
					className="disabled:opacity-60 disabled:cursor-not-allowed">
					<BsChevronDoubleRight />
				</button>
			</div>
		</div>
	);

	return {page, items, setPage, render, renderMinimal};
}