<script setup lang="ts">
/**
 * A PROJECT's lifecycle state as a pill — active, paused, completed, archived.
 *
 * Deliberately not StatusBadge. That component is typed to TaskStatus and
 * speaks a different vocabulary; these two only ever shared a CSS class name,
 * which is what made them look like one shape that had drifted (#3132).
 *
 * Extracted because ProjectView and ProjectListView really were spelling the
 * same pill twice, with the differences you get from two hands rather than
 * two intentions: 0.68rem against 0.7rem, a 14% tint against 15%, one with a
 * border and one without.
 */
const props = defineProps<{ status: string }>();

const LABELS: Record<string, string> = {
  active: "Active",
  paused: "Paused",
  completed: "Completed",
  archived: "Archived",
};

const label = (s: string) => LABELS[s] ?? s;
</script>

<template>
  <span :class="['project-status', `project-status--${props.status}`]">
    {{ label(props.status) }}
  </span>
</template>

<style scoped>
.project-status {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--fs-radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Text is the hue mixed toward --fs-text-primary, not the raw hue. Both old
   spellings painted the hue on a 15% tint of itself, which measured 1.61-2.39:1
   against AA's 4.5 — the same defect the status and priority ladders had, and
   invisible to the token checker because the background was an inline
   color-mix rather than a `-bg` token. The checker was widened alongside this.
   Measured worst-case over raised and hover in both modes: active 4.82:1,
   paused 4.63:1, completed 4.78:1, archived 4.84:1.
   No new design tokens: four values used by one component are the kind of
   growth Scribe's own design-system note warns about ("if this system grows
   past a handful of tokens, that is worth noticing rather than
   accommodating"). The derivation is stated once, here. */
.project-status--active {
  background: color-mix(in srgb, var(--fs-success) 15%, transparent);
  color: color-mix(in srgb, var(--fs-success) 45%, var(--fs-text-primary));
}
.project-status--paused {
  background: color-mix(in srgb, var(--fs-warning) 15%, transparent);
  color: color-mix(in srgb, var(--fs-warning) 55%, var(--fs-text-primary));
}
.project-status--completed {
  background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
  color: color-mix(in srgb, var(--fs-accent) 45%, var(--fs-text-primary));
}
.project-status--archived {
  background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
  color: color-mix(in srgb, var(--fs-text-tertiary) 55%, var(--fs-text-primary));
}
</style>
