import { cn } from "@/lib/utils";

/**
 * Placeholder blocks for streaming fallbacks.
 *
 * These are Server Components on purpose — a `loading.tsx` fallback is sent as
 * part of the initial HTML, so shipping client JS to render a grey box would
 * defeat the point.
 */
export function Skeleton({ className }: { className?: string }) {
  return <div className={cn("animate-pulse rounded-md bg-gray-200/80", className)} />;
}

/** Matches the card grid used by the products / categories listings. */
export function CardGridSkeleton({ count = 6 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
          <Skeleton className="mb-4 aspect-[16/10] w-full rounded-xl" />
          <Skeleton className="mb-4 h-5 w-24 rounded-full" />
          <Skeleton className="mb-2 h-5 w-3/4" />
          <Skeleton className="mb-4 h-3 w-1/3" />
          <Skeleton className="h-10 w-full rounded-lg" />
        </div>
      ))}
    </div>
  );
}

/** Matches the tabular listings used by /prices and /historical-data. */
export function TableSkeleton({ rows = 8 }: { rows?: number }) {
  return (
    <div className="overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-sm">
      <Skeleton className="h-11 w-full rounded-none" />
      <div className="divide-y divide-gray-100">
        {Array.from({ length: rows }).map((_, i) => (
          <div key={i} className="flex items-center gap-4 px-4 py-3.5">
            <Skeleton className="h-4 flex-1" />
            <Skeleton className="h-4 w-20" />
            <Skeleton className="h-4 w-24" />
          </div>
        ))}
      </div>
    </div>
  );
}

/** Article / detail page: title, meta line, hero image, body copy. */
export function ArticleSkeleton() {
  return (
    <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
      <Skeleton className="mb-4 h-9 w-4/5" />
      <Skeleton className="mb-8 h-4 w-40" />
      <Skeleton className="mb-8 aspect-[16/9] w-full rounded-2xl" />
      <div className="space-y-3">
        {Array.from({ length: 8 }).map((_, i) => (
          <Skeleton key={i} className={cn("h-4", i % 4 === 3 ? "w-2/3" : "w-full")} />
        ))}
      </div>
    </div>
  );
}