<template>
  <span :class="['inline-block px-2.5 py-0.5 rounded-full text-xs font-semibold uppercase tracking-wide', colorClass]">
    {{ type }}
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{ type: string }>()

const colors: Record<string, string> = {
  association: 'bg-blue-100 text-blue-700',
  syndicat: 'bg-orange-100 text-orange-700',
  institution: 'bg-purple-100 text-purple-700',
  reseau: 'bg-teal-100 text-teal-700',
  collectif: 'bg-pink-100 text-pink-700',
  ecole: 'bg-yellow-100 text-yellow-700',
  media: 'bg-red-100 text-red-700',
}

const colorClass = computed(() => colors[props.type] ?? 'bg-gray-100 text-gray-700')
</script>
