<script lang="ts">
  import type { VersionStatus, JobStatus, JobStageStatus } from '$lib/types';

  interface Props {
    status: VersionStatus | JobStatus | JobStageStatus | string;
    label?: string | null;
  }
  let { status, label }: Props = $props();

  function colorFor(s: string): string {
    switch (s) {
      case 'INDEXED':
      case 'SUCCEEDED':
        return 'var(--ok)';
      case 'INDEXING':
      case 'RUNNING':
      case 'QUEUED':
        return 'var(--accent)';
      case 'FAILED':
        return 'var(--err)';
      case 'SKIPPED':
      case 'INACTIVE':
      case 'CANCELLED':
        return 'var(--muted)';
      case 'DISCOVERED':
      case 'PENDING':
      default:
        return 'var(--warn)';
    }
  }
</script>

<span class="badge" style="--badge-color: {colorFor(status)};">{label ?? status}</span>

<style>
  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color) 45%, transparent);
    line-height: 1.2;
    white-space: nowrap;
  }
</style>
