import GridWrapper from "@/components/GridWrapper";
import { type FC } from "react";

const PREVIEW_WIDTH = 64;
const PREVIEW_HEIGHT = 89;

export const CatalogueItemSkeleton: FC = () => (
  <div
    className="bg-white p-6 rounded-3xl w-full animate-pulse"
    aria-hidden="true"
  >
    <div className="flex gap-4 items-center">
      <div
        className="bg-gray-200 rounded-lg shrink-0"
        style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
      />
      <div className="flex-1 min-w-0">
        <div className="h-4 bg-gray-200 rounded-md w-3/4 max-w-[160px]" />
        <div className="mt-2 h-3 bg-gray-200 rounded-md w-1/3 max-w-[80px]" />
      </div>
    </div>
    <div className="flex justify-end gap-1 items-center mt-1">
      {Array.from({ length: 4 }).map((_, index) => (
        <div key={index} className="size-6 bg-gray-200 rounded-md" />
      ))}
    </div>
  </div>
);

type CatalogueGridSkeletonProps = {
  count?: number;
};

const CatalogueGridSkeleton: FC<CatalogueGridSkeletonProps> = ({ count = 8 }) => (
  <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
    {Array.from({ length: count }).map((_, index) => (
      <CatalogueItemSkeleton key={index} />
    ))}
  </GridWrapper>
);

export default CatalogueGridSkeleton;
