"use client";

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

/**
 * Shape-aware. There was one fixed 68px row used for the admin dashboard, the
 * discover grid and the review queue alike, so the loading state never
 * resembled what actually arrived.
 */
export function Skeleton({ className }: { className?: string }) {
  return <div className={cn("shimmer rounded-card border border-edge", className)} />;
}

export function SkeletonRows({ n = 6 }: { n?: number }) {
  return (
    <div className="flex flex-col gap-row">
      {Array.from({ length: n }, (_, i) => (
        <Skeleton key={i} className="h-[64px]" />
      ))}
    </div>
  );
}

export function SkeletonCards({ n = 4 }: { n?: number }) {
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {Array.from({ length: n }, (_, i) => (
        <Skeleton key={i} className="h-[84px] rounded-panel" />
      ))}
    </div>
  );
}

export function SkeletonGrid({ n = 8 }: { n?: number }) {
  return (
    <div className="grid grid-cols-[repeat(auto-fill,minmax(148px,1fr))] gap-4">
      {Array.from({ length: n }, (_, i) => (
        <div key={i} className="flex flex-col gap-2">
          <Skeleton className="aspect-square w-full rounded-panel" />
          <Skeleton className="h-3 w-3/4 rounded-pill border-0" />
        </div>
      ))}
    </div>
  );
}