/**
 * Composant TrackListSkeleton
 * Skeleton loader pour afficher un état de chargement de la liste de pistes
 */

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

export interface TrackListSkeletonProps {
  count?: number;
  showCover?: boolean;
  showMetadata?: boolean;
  showDuration?: boolean;
  className?: string;
}

export function TrackListSkeleton({
  count = 5,
  showCover = true,
  showMetadata = true,
  showDuration = true,
  className,
}: TrackListSkeletonProps) {
  return (
    <div
      className={cn('space-y-2', className)}
      role="status"
      aria-label="Chargement des pistes"
    >
      {Array.from({ length: count }).map((_, index) => (
        <div
          key={index}
          className="flex items-center gap-4 p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
        >
          {/* Cover Skeleton */}
          {showCover && (
            <div className="flex-shrink-0">
              <div className="w-12 h-12 rounded-md bg-gray-200 dark:bg-gray-700 animate-pulse" />
            </div>
          )}

          {/* Track Info Skeleton */}
          <div className="flex-1 min-w-0 space-y-2">
            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4" />
            {showMetadata && (
              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2" />
            )}
          </div>

          {/* Duration Skeleton */}
          {showDuration && (
            <div className="flex-shrink-0">
              <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-12" />
            </div>
          )}
        </div>
      ))}
      <span className="sr-only">Chargement des pistes en cours...</span>
    </div>
  );
}

export default TrackListSkeleton;
