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

import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

interface PlaylistHeaderSkeletonProps {
  className?: string;
}

export function PlaylistHeaderSkeleton({
  className,
}: PlaylistHeaderSkeletonProps) {
  return (
    <Card
      className={cn('mb-6', className)}
      role="status"
      aria-label="Chargement de la playlist"
    >
      <CardContent className="p-4 sm:p-6">
        <div className="flex flex-col md:flex-row gap-4 sm:gap-6">
          {/* Cover Image */}
          <div className="w-full md:w-64 h-48 sm:h-64 flex-shrink-0">
            <Skeleton
              variant="rectangular"
              className="w-full h-full rounded-lg"
            />
          </div>

          {/* Playlist Info */}
          <div className="flex-1 space-y-3 sm:space-y-4">
            <div className="space-y-2">
              <Skeleton
                variant="text"
                height={32}
                width="60%"
                className="sm:h-9"
              />
              <Skeleton variant="text" height={20} width="80%" />
            </div>

            <div className="flex flex-wrap gap-3 sm:gap-4">
              <Skeleton variant="text" height={16} width={100} />
              <Skeleton variant="text" height={16} width={120} />
              <Skeleton variant="text" height={16} width={150} />
            </div>
          </div>
        </div>
      </CardContent>
      <span className="sr-only">Chargement des détails de la playlist...</span>
    </Card>
  );
}
