/**
 * Skeleton component pour PlaylistTrackList
 * T0505: Create Playlist Loading States
 */

import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

interface PlaylistTrackListSkeletonProps {
  count?: number;
  className?: string;
}

export function PlaylistTrackListSkeleton({
  count = 5,
  className,
}: PlaylistTrackListSkeletonProps) {
  return (
    <div
      className={cn('space-y-1', className)}
      role="status"
      aria-label="Chargement des pistes"
    >
      {Array.from({ length: count }).map((_, index) => (
        <div
          key={index}
          className="flex items-center gap-2 sm:gap-4 p-2 sm:p-3 rounded-lg"
        >
          {/* Position/Play button */}
          <div className="flex-shrink-0 w-6 sm:w-8 flex items-center justify-center">
            <Skeleton variant="circular" width={24} height={24} />
          </div>

          {/* Cover */}
          <div className="flex-shrink-0">
            <Skeleton
              variant="rectangular"
              width={40}
              height={40}
              className="rounded-md sm:w-12 sm:h-12"
            />
          </div>

          {/* Track Info */}
          <div className="flex-1 min-w-0 space-y-2">
            <Skeleton
              variant="text"
              height={16}
              width="70%"
              className="sm:h-4"
            />
            <Skeleton
              variant="text"
              height={12}
              width="50%"
              className="sm:h-3"
            />
          </div>

          {/* Duration - Hidden on mobile */}
          <div className="hidden sm:block flex-shrink-0">
            <Skeleton variant="text" height={14} width={40} />
          </div>
        </div>
      ))}
      <span className="sr-only">Chargement des pistes en cours...</span>
    </div>
  );
}
