<script lang="ts" module>
  import type { LidarrRequestStatus } from '$lib/api/types';

  type Tone = 'warning' | 'info' | 'success' | 'error';

  type StatusEntry = { label: string; tone: Tone };

  // Voice-rule labels per spec §6 (and project_design_system.md). Pending requests
  // are an "awaiting" moment, completed requests are "kept" (Minstrel-voice for
  // success), rejected is "set aside", failed is the error register.
  const STATUS_TABLE: Record<LidarrRequestStatus, StatusEntry> = {
    pending:   { label: 'Awaiting review',         tone: 'warning' },
    approved:  { label: 'Approved · downloading',  tone: 'info'    },
    completed: { label: 'Kept',                    tone: 'success' },
    rejected:  { label: 'Set aside',               tone: 'error'   },
    failed:    { label: "Couldn't add",            tone: 'error'   },
  };
</script>

<script lang="ts">
  let { status }: { status: LidarrRequestStatus } = $props();

  const entry = $derived(STATUS_TABLE[status]);
</script>

<span class="pill" data-tone={entry.tone} data-status={status}>{entry.label}</span>

<style>
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
  }
  .pill[data-tone='warning'] {
    background: color-mix(in srgb, var(--fs-warning) 15%, transparent);
    color: var(--fs-warning);
  }
  .pill[data-tone='info'] {
    background: color-mix(in srgb, var(--fs-info) 15%, transparent);
    color: var(--fs-info);
  }
  .pill[data-tone='success'] {
    background: color-mix(in srgb, var(--fs-moss) 15%, transparent);
    color: var(--fs-moss);
  }
  .pill[data-tone='error'] {
    background: color-mix(in srgb, var(--fs-error) 15%, transparent);
    color: var(--fs-error);
  }
</style>
