"use client";
import { trpc } from "@/app/_trpc/client";
import { Button } from "@/components/ui/button";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import useHandleParams from "@/hooks/useHandleParams";

 function PaginationComponent({searchParams}: {
  searchParams: Record<string, string>;
}) {
  const { setParams,getParam } = useHandleParams();

  const [data]=trpc.projects.getProjects.useSuspenseQuery(searchParams)

  if(!data)return

  const arrNumbers = Array(Math.round(data?.pageCount!))
    .fill(0)
    .map((_, i) => {
      const id = i + 1;
      return id;
    });

    if(data?.pageCount! <= 1) return

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        {arrNumbers?.map((page) => {
          return (
            <PaginationItem
              key={page}
              onClick={() => setParams("page", page.toString())}
            >
              <PaginationLink href="#">{page}</PaginationLink>
            </PaginationItem>
          );
        })}
        <PaginationItem >
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationNext onClick={() => parseInt(getParam("page")) + 1}>
        Siguiente
        </PaginationNext>
      </PaginationContent>
    </Pagination>
  );
}

export default PaginationComponent