import { RouteLoading } from "@/components/molecules/RouteLoading";
import { Squares2X2Icon } from "@heroicons/react/24/outline";
import { LoadingCard } from "@/components/atoms/loading-skeleton";

export default function CatalogLoading() {
  return (
    <RouteLoading
      icon={<Squares2X2Icon />}
      title="Catalog"
      description="Loading catalog..."
      mode="content"
    >
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        {Array.from({ length: 6 }).map((_, i) => (
          <LoadingCard key={i} />
        ))}
      </div>
    </RouteLoading>
  );
}
