<template>
  <NuxtLink
    :to="`/fiche/${org.Id}`"
    class="block bg-white rounded-xl shadow-sm border border-warm-200 hover:shadow-md hover:border-sage-300 transition-all duration-200 p-5"
  >
    <div class="flex items-start justify-between gap-3 mb-2">
      <h2 class="font-semibold text-gray-900 text-base leading-snug">{{ org.nom }}</h2>
      <TypeBadge v-if="org.type_org" :type="org.type_org" class="shrink-0 mt-0.5" />
    </div>

    <p class="text-gray-600 text-sm leading-relaxed mb-3 line-clamp-2">
      {{ org.description }}
    </p>

    <div v-if="tags.length" class="flex flex-wrap gap-1.5">
      <TagBadge
        v-for="tag in tags"
        :key="tag"
        :tag="tag"
        @click="$emit('filter-tag', tag)"
      />
    </div>
  </NuxtLink>
</template>

<script setup lang="ts">
const props = defineProps<{
  org: {
    Id: number
    nom: string
    type_org?: string
    description?: string
    tags?: string
    lien?: string
  }
}>()

defineEmits<{ 'filter-tag': [tag: string] }>()

const tags = computed(() =>
  props.org.tags
    ? props.org.tags.split(',').map((t) => t.trim()).filter(Boolean)
    : []
)
</script>
