"use client";

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

export function PosterSkeleton({ className }: { className?: string }) {
  return <div className={cn("aspect-[2/3] rounded-xl shimmer", className)} />;
}

export function RowSkeleton({ count = 6 }: { count?: number }) {
  return (
    <section className="mb-8">
      <div className="px-4 md:px-8 mb-3">
        <div className="h-6 w-40 rounded shimmer" />
      </div>
      <div className="flex gap-3 md:gap-4 overflow-hidden px-4 md:px-8">
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className="shrink-0 w-[140px] sm:w-[160px] md:w-[180px]">
            <PosterSkeleton className="w-full" />
          </div>
        ))}
      </div>
    </section>
  );
}

export function EmptyState({ title, subtitle, icon: Icon }: { title: string; subtitle?: string; icon?: any }) {
  return (
    <div className="flex flex-col items-center justify-center py-20 px-4 text-center">
      {Icon && <Icon className="h-16 w-16 text-muted-foreground/40 mb-4" />}
      <h3 className="text-lg font-bold text-foreground mb-1">{title}</h3>
      {subtitle && <p className="text-sm text-muted-foreground max-w-sm">{subtitle}</p>}
    </div>
  );
}

export function Spinner({ className }: { className?: string }) {
  return (
    <div className={cn("flex items-center justify-center", className)}>
      <div className="h-8 w-8 rounded-full border-2 border-primary/30 border-t-primary animate-spin" />
    </div>
  );
}