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

export function Skeleton({ className }: { className?: string }) {
  return <div className={cn("skeleton", className)} aria-hidden />;
}

/** Mirrors the real poster-card geometry 1:1 so the layout never shifts. */
export function CardSkeleton() {
  return (
    <div className="w-[136px] shrink-0 sm:w-[150px] md:w-[164px]">
      <Skeleton className="aspect-2/3 w-full rounded-md" />
      <Skeleton className="mt-2.5 h-3 w-[85%] rounded-xs" />
      <Skeleton className="mt-1.5 h-2.5 w-[55%] rounded-xs" />
    </div>
  );
}

export function RankedCardSkeleton({ rank }: { rank: number }) {
  return (
    <div className="flex shrink-0 items-center gap-3" style={{ width: 208 }}>
      <span className="rank-numeral w-[54px] text-center text-[88px]">{rank}</span>
      <Skeleton className="h-[228px] w-[144px] rounded-md" />
    </div>
  );
}

export function RowSkeleton({ count = 8 }: { count?: number }) {
  return (
    <section className="mb-10 md:mb-12">
      <div className="mb-4 flex items-center gap-3 px-4 sm:px-6 lg:px-10">
        <span className="row-tick" />
        <Skeleton className="h-5 w-44 rounded-xs" />
      </div>
      <div className="no-scrollbar flex gap-3.5 overflow-x-auto px-4 sm:gap-4 sm:px-6 lg:px-10">
        {Array.from({ length: count }, (_, i) => (
          <CardSkeleton key={i} />
        ))}
      </div>
    </section>
  );
}

export function HeroSkeleton() {
  return (
    // Mirrors the real hero's height so the layout does not jump when the
    // slides arrive.
    <div className="relative h-[91svh] min-h-[520px] w-full">
      <Skeleton className="h-full w-full rounded-none" />
      <div className="absolute inset-x-0 bottom-24 px-5 sm:px-8 sm:bottom-26 lg:pl-3 lg:pr-14 lg:bottom-24">
        <Skeleton className="mb-3 h-5 w-24 rounded-pill" />
        <Skeleton className="mb-4 h-4 w-40 rounded-xs" />
        <Skeleton className="mb-5 h-12 w-[min(560px,80vw)] rounded-sm" />
        <Skeleton className="mb-3 h-3 w-56 rounded-xs" />
        <Skeleton className="mb-6 h-3 w-[min(520px,86vw)] rounded-xs" />
        <div className="flex gap-3">
          <Skeleton className="h-[52px] w-36 rounded-pill" />
          <Skeleton className="h-[52px] w-32 rounded-pill" />
        </div>
      </div>
    </div>
  );
}

// The catalogue-grid skeleton lives next to the grid it mirrors, so the two can
// never drift apart. Re-exported for `loading.tsx` files that import from here.
export { GridSkeleton } from "@/components/browse/poster-grid";