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

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

interface PlaylistListSkeletonProps {
  count?: number;
  view?: 'grid' | 'list';
  className?: string;
}

export function PlaylistListSkeleton({
  count = 8,
  view = 'grid',
  className,
}: PlaylistListSkeletonProps) {
  return (
    <div
      className={cn(
        view === 'grid'
          ? 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4'
          : 'flex flex-col gap-2 sm:gap-3',
        className,
      )}
      role="status"
      aria-label="Chargement des playlists"
    >
      {Array.from({ length: count }).map((_, index) => (
        <PlaylistCardSkeleton key={index} variant={view} />
      ))}
      <span className="sr-only">Chargement des playlists en cours...</span>
    </div>
  );
}
