<script setup lang="ts">
import type { TaskStatus } from "@/types/task";

const props = defineProps<{
  status: TaskStatus;
  clickable?: boolean;
  /** Dense surfaces — smaller, unshouted. The canon (#2960) names compact a
      VARIANT of this component rather than a reason to re-spell it. */
  compact?: boolean;
}>();

defineEmits<{ click: [] }>();

const labels: Record<TaskStatus, string> = {
  todo: "Todo",
  in_progress: "In progress",
  done: "Done",
  cancelled: "Cancelled",
};
</script>

<template>
  <span
    :class="['status-badge', `status-${props.status}`, { clickable, compact }]"
    @click="clickable ? $emit('click') : undefined"
    :role="clickable ? 'button' : undefined"
    :tabindex="clickable ? 0 : undefined"
  >
    {{ labels[props.status] }}
  </span>
</template>

<style scoped>
.status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  /* 500 is the heaviest the house style goes — 400 and 500 only. */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
/* Text comes from the -fg tokens, which are the hue mixed toward
   --fs-text-primary until they clear AA. The old spelling darkened the hue
   with `#000 15%` — a light-mode instinct that made these WORSE on the dark
   palette, where the surface is already near-black, and a literal besides. */
.status-todo {
  background: var(--fs-status-todo-bg);
  color: var(--fs-status-todo-fg);
}
.status-in_progress {
  background: var(--fs-status-in-progress-bg);
  color: var(--fs-status-in-progress-fg);
}
.status-done {
  background: var(--fs-status-done-bg);
  color: var(--fs-status-done-fg);
}
.status-cancelled {
  background: var(--fs-status-todo-bg);
  color: var(--fs-status-cancelled-fg);
}
.compact {
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: normal;
}
.clickable {
  cursor: pointer;
}
.clickable:hover {
  filter: brightness(0.9);
}
</style>
