<script setup lang="ts">
/**
 * A task's KIND, shown on a list row — issue, spike, or a legacy plan.
 *
 * Sibling of PriorityBadge, and shaped like it on purpose: same geometry, and
 * the same rule that the DEFAULT value renders nothing. `work` is most tasks,
 * so badging it would put a chip on nearly every row and say nothing — the
 * same reason RuleListPane marks only `conditional`.
 *
 * Kind is not status. A task can be an in-progress issue or a done spike;
 * this answers "what kind of work is this", never "how is it going".
 */
import type { TaskKind } from "@/types/note";

const props = defineProps<{ kind?: TaskKind | null }>();

const LABELS: Record<string, string> = {
  issue: "Issue",
  spike: "Spike",
  plan: "Plan",
};

const TITLES: Record<string, string> = {
  issue: "Corrective work — something was broken",
  spike: "Time-boxed investigation — the output is an answer, not a change",
  plan: "Legacy plan-task; plans are milestones now",
};
</script>

<template>
  <span
    v-if="props.kind && LABELS[props.kind]"
    :class="['kind-badge', `kind-${props.kind}`]"
    :title="TITLES[props.kind]"
  >{{ LABELS[props.kind] }}</span>
</template>

<style scoped>
.kind-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  /* 500, not the 600 StatusBadge and PriorityBadge use. The house style
     allows two weights, 400 and 500 — those two predate the constraint and
     copying them would spread it. */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

/* Issue and spike are opposite in character — corrective vs exploratory — so
   they are split by TEMPERATURE, warm against cool, which survives being
   small and stays distinguishable without relying on reading the word.
   Neither uses the accent: one accent per app, and kind is not one of the
   places it is allowed.
   The text is the hue mixed toward --fs-text-primary rather than the raw
   semantic colour. Raw fails the contrast floor on the dark palette —
   measured: warning on its own 12% tint is 2.97:1, well under AA's 4.5.
   Mixing toward the text token also makes these follow the mode for free,
   since that token inverts. Measured both ways: issue 5.23:1 dark / 6.68:1
   light, spike 5.33:1 / 9.26:1. */
.kind-issue {
  background: color-mix(in srgb, var(--fs-warning) 14%, var(--fs-surface-raised));
  color: color-mix(in srgb, var(--fs-warning) 60%, var(--fs-text-primary));
}
.kind-spike {
  background: color-mix(in srgb, var(--fs-info) 14%, var(--fs-surface-raised));
  color: color-mix(in srgb, var(--fs-info) 50%, var(--fs-text-primary));
}
/* Retired since 0066 — deliberately hue-free so a legacy row reads as
   archival rather than as a fourth active kind competing for attention. */
.kind-plan {
  background: var(--fs-surface-raised);
  color: var(--fs-text-tertiary);
  font-style: italic;
}
</style>
