import { Loader2 } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

/** Button/inline spinner (§6.4). */
export function Spinner({ className }: { className?: string }) {
  return (
    <Loader2
      className={cn("size-4 animate-spin motion-reduce:animate-none", className)}
      aria-hidden
    />
  );
}

/**
 * BlogCardSkeleton (§6.4) — box sizes mirror the real BlogCard so CLS ≈ 0.
 */
export function BlogCardSkeleton() {
  return (
    <div className="flex flex-col rounded-2xl border border-border bg-card p-4">
      <Skeleton className="aspect-[16/9] w-full rounded-xl" />
      <Skeleton className="mt-4 h-4 w-20" />
      <Skeleton className="mt-3 h-5 w-full" />
      <Skeleton className="mt-2 h-5 w-3/4" />
      <div className="mt-4 flex items-center gap-2">
        <Skeleton className="size-8 rounded-full" />
        <Skeleton className="h-3 w-24" />
      </div>
    </div>
  );
}

export function BlogListSkeleton({ count = 6 }: { count?: number }) {
  return (
    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: count }).map((_, i) => (
        <BlogCardSkeleton key={i} />
      ))}
    </div>
  );
}