<script lang="ts">
  import { Sparkles } from 'lucide-svelte';

  let {
    label,
    variant = 'pending'
  }: {
    /** Card title (e.g. "For You" or "Songs like…"). */
    label: string;
    /** Drives copy + animation. */
    variant?: 'building' | 'failed' | 'pending' | 'seed-needed';
  } = $props();

  const copy = $derived.by(() => {
    switch (variant) {
      case 'building':    return 'Building your daily mix…';
      case 'failed':      return 'Couldn’t build this mix. Retrying soon.';
      case 'seed-needed': return 'Listen to more variety to unlock this slot.';
      default:            return 'Listen to a few tracks — appears within 24h.';
    }
  });

  // animate-pulse on the cover area when variant is 'building' or 'pending'.
  // 'pending' shows the animation since it's awaiting results within 24h.
  // 'failed' and 'seed-needed' are static terminal states.
  const coverClasses = $derived(
    'aspect-square w-full overflow-hidden rounded-md bg-surface-hover ' +
    'flex items-center justify-center text-text-muted ' +
    (variant === 'building' || variant === 'pending' ? 'animate-pulse' : '')
  );
</script>

<div class="flex w-full flex-col items-start gap-2 rounded-md p-2 text-left" data-testid="playlist-placeholder-card" data-variant={variant}>
  <div class={coverClasses}>
    <Sparkles size={40} strokeWidth={1} />
  </div>
  <div class="w-full min-w-0">
    <div class="truncate text-sm font-medium text-text-primary">{label}</div>
    <div class="truncate text-xs text-text-muted">{copy}</div>
  </div>
</div>
