<script setup lang="ts">
import type { ProjectStatus } from '@/types/api'

const props = defineProps<{ status: ProjectStatus }>()

// On utilise des hex avec alpha (RRGGBBAA) pour avoir des pastels sans
// dépendre d'une palette Tailwind. Approche fragile pour des couleurs trop
// claires mais OK pour nos 3 statuts.
const config: Record<ProjectStatus, { label: string; bg: string; fg: string }> = {
  active:    { label: 'Actif',   bg: '#F973161A', fg: '#C2410C' },
  completed: { label: 'Réalisé', bg: '#A855F71A', fg: '#7E22CE' },
  archived:  { label: 'Archivé', bg: '#6B72801A', fg: '#374151' },
}
</script>

<template>
  <span
    class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
    :style="{ background: config[props.status].bg, color: config[props.status].fg }"
  >
    {{ config[props.status].label }}
  </span>
</template>
