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

const props = defineProps<{
  status: TaskStatus;
  clickable?: 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 }]"
    @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;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.status-todo {
  background: color-mix(in srgb, var(--fs-status-todo-bg) 78%, var(--fs-status-todo) 22%);
  color: color-mix(in srgb, var(--fs-status-todo) 85%, #000 15%);
}
.status-in_progress {
  background: color-mix(in srgb, var(--fs-status-in-progress-bg) 78%, var(--fs-status-in-progress) 22%);
  color: color-mix(in srgb, var(--fs-status-in-progress) 85%, #000 15%);
}
.status-done {
  background: color-mix(in srgb, var(--fs-status-done-bg) 78%, var(--fs-status-done) 22%);
  color: color-mix(in srgb, var(--fs-status-done) 85%, #000 15%);
}
.status-cancelled {
  background: color-mix(in srgb, var(--fs-surface-raised) 78%, var(--fs-text-tertiary) 22%);
  color: var(--fs-text-tertiary);
}
.clickable {
  cursor: pointer;
}
.clickable:hover {
  filter: brightness(0.9);
}
</style>
