<script setup lang="ts">
import { RouterLink } from 'vue-router'
import type { ProjectListRow } from '@/types/api'
import StatusBadge from './StatusBadge.vue'
import CategoryBadge from './CategoryBadge.vue'
import ProgressBar from './ProgressBar.vue'

defineProps<{ project: ProjectListRow }>()
</script>

<template>
  <RouterLink
    :to="{ name: 'project-detail', params: { slug: project.slug } }"
    class="group block rounded-xl border border-donut-border bg-donut-surface overflow-hidden hover:shadow-md transition-shadow"
  >
    <!-- Cover image ou placeholder dégradé -->
    <div
      class="h-32 w-full bg-gray-100 bg-center bg-cover"
      :style="project.cover_image_url
        ? { backgroundImage: `url(${project.cover_image_url})` }
        : { background: `linear-gradient(135deg, ${project.category.color_hex}33, ${project.category.color_hex}11)` }
      "
    />

    <div class="p-5">
      <div class="flex items-center gap-2 mb-3 flex-wrap">
        <StatusBadge :status="project.status" />
        <CategoryBadge :name="project.category.name" :color-hex="project.category.color_hex" />
      </div>

      <h3 class="text-base font-semibold text-donut-text group-hover:text-black line-clamp-2">
        {{ project.title }}
      </h3>
      <p
        v-if="project.short_description"
        class="text-sm text-donut-muted mt-2 line-clamp-3 leading-relaxed"
      >
        {{ project.short_description }}
      </p>

      <div class="mt-4">
        <div class="flex items-center justify-between text-xs text-donut-muted mb-1">
          <span>Progression</span>
          <span class="tabular-nums font-medium">{{ project.progress_percent }}%</span>
        </div>
        <ProgressBar :value="project.progress_percent" :color="project.category.color_hex" />
      </div>
    </div>
  </RouterLink>
</template>

<style scoped>
/* Tailwind v4 fournit déjà line-clamp via les utilitaires. */
</style>
