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

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

interface PlaylistCardSkeletonProps {
  className?: string;
  variant?: 'grid' | 'list';
}

export function PlaylistCardSkeleton({
  className,
  variant = 'grid',
}: PlaylistCardSkeletonProps) {
  if (variant === 'list') {
    return (
      <Card className={cn('cursor-pointer', className)}>
        <CardContent className="p-0">
          <div className="flex flex-row gap-4 p-3 sm:p-4">
            {/* Cover Image - Square */}
            <div className="flex-shrink-0">
              <Skeleton
                variant="rectangular"
                width={80}
                height={80}
                className="rounded-lg"
              />
            </div>

            {/* Info */}
            <div className="flex-1 space-y-2 min-w-0">
              <Skeleton variant="text" height={20} width="70%" />
              <Skeleton variant="text" height={16} width="50%" />
              <div className="flex gap-4 mt-2">
                <Skeleton variant="text" height={14} width={60} />
                <Skeleton variant="text" height={14} width={80} />
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={cn('cursor-pointer', className)}>
      <CardContent className="p-0">
        {/* Cover Image */}
        <div className="aspect-square w-full">
          <Skeleton
            variant="rectangular"
            className="w-full h-full rounded-t-lg"
          />
        </div>

        {/* Playlist Info */}
        <div className="p-3 sm:p-4 space-y-2">
          <Skeleton variant="text" height={20} width="80%" />
          <Skeleton variant="text" height={16} width="100%" />
          <Skeleton variant="text" height={16} width="60%" />
          <div className="flex justify-between items-center mt-2">
            <Skeleton variant="text" height={14} width={60} />
            <Skeleton variant="text" height={14} width={80} />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
