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

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 slug={slug ?? ""} refetch={refetch} key={item.id} item={item} readOnly />;
        })}
      </GridWrapper>
    </div>
  );
};

export default Business;
