<script setup lang="ts">
// One line of the collective's activity — route icon, title → fiche, status pill.
import type { Decision } from '~/types/domain'
import { ROUTE_ICONS, STATUS_LABELS } from '~/lexicon'

const props = defineProps<{ decision: Decision }>()

const when = computed(() =>
  new Date(props.decision.updatedAt).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'short',
  }),
)
</script>

<template>
  <!-- ld-v2 -->
  <NuxtLink :to="`/decisions/${decision.id}`" class="ld-card ld-card--hover fac">
    <UIcon
      :name="ROUTE_ICONS[decision.route]"
      class="fac__icon"
      :style="{ color: `var(--route-${decision.route})` }"
    />
    <span class="fac__title">{{ decision.title }}</span>
    <span class="status-pill fac__pill" :class="`status-${decision.status}`">
      {{ STATUS_LABELS[decision.status] }}
    </span>
    <span class="fac__when">{{ when }}</span>
  </NuxtLink>
</template>

<style scoped>
.fac {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  text-decoration: none;
  color: var(--mood-text);
}
.fac__icon { font-size: 1rem; flex-shrink: 0; }
.fac__title {
  flex: 1;
  min-width: 0;
  font-size: 0.9063rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fac__pill { flex-shrink: 0; }
.fac__when {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  display: none;
}
@media (min-width: 480px) {
  .fac__when { display: inline; }
}
</style>
