import { PageContainer } from "@/components/layout/page-container";
import { LoadingSkeleton } from "@/components/ui/loading-skeleton";

export default function ShopLoading() {
  return (
    <PageContainer className="space-y-10 py-12">
      <div className="space-y-3">
        <LoadingSkeleton className="h-3 w-24" />
        <LoadingSkeleton className="h-10 w-full max-w-md" />
        <LoadingSkeleton className="h-6 w-full max-w-2xl" />
      </div>
      <div className="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)]">
        <LoadingSkeleton className="h-[28rem] rounded-[1.75rem]" />
        <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
          {Array.from({ length: 6 }, (_, index) => (
            <LoadingSkeleton key={index} className="h-[24rem] w-full rounded-[1.5rem]" />
          ))}
        </div>
      </div>
    </PageContainer>
  );
}