<script lang="ts">
  import type { UiSeverity } from "../types";

  let {
    label,
    severity = "neutral",
  }: {
    label: string;
    severity?: UiSeverity;
  } = $props();
</script>

<span class="status-badge" data-severity={severity}>{label}</span>

<style>
  .status-badge {
    display: inline-grid;
    min-height: 1.6rem;
    align-items: center;
    border: var(--ui-border);
    padding: 0 var(--ui-space-2);
    color: var(--ui-color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .status-badge[data-severity="ok"] {
    border-color: color-mix(in srgb, var(--ui-color-ok), transparent 42%);
    color: var(--ui-color-ok);
  }

  .status-badge[data-severity="warning"] {
    border-color: color-mix(in srgb, var(--ui-color-warning), transparent 35%);
    color: var(--ui-color-warning);
  }

  .status-badge[data-severity="danger"] {
    border-color: color-mix(in srgb, var(--ui-color-danger), transparent 30%);
    color: var(--ui-color-danger);
  }

  .status-badge[data-severity="stale"],
  .status-badge[data-severity="unavailable"] {
    color: var(--ui-color-stale);
  }

  .status-badge[data-severity="loading"] {
    color: var(--ui-color-accent);
  }
</style>
