import GridWrapper from "@/components/GridWrapper";
import { usePageTitle } from "@/hooks/usePageTitle";
import { type FC } from "react";
import { useGetCatalog } from "./hooks/useCatalogueData";
import ButtonAddCatalogue from "./components/ButtonAddCatalogue";
import CatalogueGridSkeleton from "./components/CatalogueGridSkeleton";
import CatalogueItem from "./components/CatalogueItem";

const CatalogueList: FC = () => {
  usePageTitle("لیست کاتالوگ‌ها");
  const { data, isPending, refetch } = useGetCatalog();

  if (isPending) {
    return (
      <div className="w-full mt-5">
        <CatalogueGridSkeleton />
      </div>
    );
  }

  return (
    <div className="w-full mt-5">
      {/* {
                !isPending && !data?.data?.length &&
                <div className='flex flex-col items-center gap-5'>
                    <div className='text-gray-500'>
                        هنوز کاتالوگی ساخته نشده است.
                    </div>

                    <Link to={Paths.home}>
                        <Button className='w-fit px-4'>
                            ساخت کاتالوگ جدید
                        </Button>
                    </Link>
                </div>
            } */}
      <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
        {data?.data?.map((item) => {
          return <CatalogueItem refetch={refetch} key={item.id} item={item} />;
        })}
        <ButtonAddCatalogue isFirst={data?.data?.length === 0} />
      </GridWrapper>
    </div>
  );
};

export default CatalogueList;
