/**
 * Ethos skeleton loading states.
 * Uses shimmer animation (defined in index.css). Never uses spinners
 * unless waiting on an unknown-duration task.
 */

export function Skeleton({ className = '' }: { className?: string }) {
  return <div className={`skeleton ${className}`} />;
}

/** Rows matching TrackRow height */
export function SkeletonRows({ count = 5 }: { count?: number }) {
  return (
    <div>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="flex h-[52px] items-center gap-2.5 rounded-md px-1.5">
          <Skeleton className="h-9 w-9 flex-none rounded" />
          <div className="flex-1 space-y-1.5">
            <Skeleton className="h-3 w-1/4" />
            <Skeleton className="h-2.5 w-1/6" />
          </div>
          <Skeleton className="h-3 w-8 flex-none" />
        </div>
      ))}
    </div>
  );
}

/** Grid matching album/artist card layout */
export function SkeletonGrid({ count = 10 }: { count?: number }) {
  return (
    <div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="flex flex-col gap-2 rounded-md border border-border bg-surface0 p-2">
          <Skeleton className="aspect-square rounded" />
          <Skeleton className="h-3 w-3/4" />
          <Skeleton className="h-2.5 w-1/2" />
        </div>
      ))}
    </div>
  );
}
