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

export default function ProductLoading() {
  return (
    <PageContainer className="space-y-10 py-12">
      <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_480px]">
        <div className="space-y-5">
          <LoadingSkeleton className="aspect-square w-full rounded-[2rem]" />
          <div className="grid gap-4 sm:grid-cols-3">
            {Array.from({ length: 3 }, (_, index) => (
              <LoadingSkeleton key={index} className="aspect-[4/3] w-full rounded-[1.25rem]" />
            ))}
          </div>
        </div>
        <div className="space-y-4">
          <LoadingSkeleton className="h-3 w-32" />
          <LoadingSkeleton className="h-12 w-full max-w-md" />
          <LoadingSkeleton className="h-8 w-40" />
          <LoadingSkeleton className="h-24 w-full" />
          <LoadingSkeleton className="h-[18rem] w-full rounded-[1.75rem]" />
        </div>
      </div>
    </PageContainer>
  );
}