import GridWrapper from "@/components/GridWrapper";
import { type FC } from "react";
import { useParams } from "react-router-dom";
import ButtonAddCatalogue from "./components/ButtonAddCatalogue";
import CatalogueGridSkeleton from "./components/CatalogueGridSkeleton";
import CatalogueItem from "./components/CatalogueItem";
import { useGetBusinessCatalog } from "./hooks/useCatalogueData";

const Business: FC = () => {
  const { slug } = useParams<{ slug: string }>();
  const { data, isPending, refetch } = useGetBusinessCatalog(slug ?? "");

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

  return (
    <div className="w-full mt-5">
      <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 Business;