<template>
  <div v-if="!loading && totalCount > 0" class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4">
    <h3 class="font-semibold text-base-content">Utilisé dans</h3>

    <div v-if="data.machines.length" class="space-y-1">
      <p class="text-xs font-medium text-base-content/60 uppercase tracking-wide">Machines</p>
      <div v-for="m in data.machines" :key="m.id" class="flex items-center gap-2 text-sm">
        <NuxtLink :to="`/machine/${m.id}`" class="hover:underline hover:text-primary transition-colors font-medium">
          {{ m.name }}
        </NuxtLink>
        <span v-if="m.site?.name" class="badge badge-ghost badge-xs">{{ m.site.name }}</span>
      </div>
    </div>

    <div v-if="data.composants.length" class="space-y-1">
      <p class="text-xs font-medium text-base-content/60 uppercase tracking-wide">Composants</p>
      <div v-for="c in data.composants" :key="c.id" class="text-sm">
        <NuxtLink :to="`/component/${c.id}`" class="hover:underline hover:text-primary transition-colors font-medium">
          {{ c.name }}
        </NuxtLink>
      </div>
    </div>

    <div v-if="data.pieces.length" class="space-y-1">
      <p class="text-xs font-medium text-base-content/60 uppercase tracking-wide">Pièces</p>
      <div v-for="p in data.pieces" :key="p.id" class="text-sm">
        <NuxtLink :to="`/piece/${p.id}`" class="hover:underline hover:text-primary transition-colors font-medium">
          {{ p.name }}
        </NuxtLink>
      </div>
    </div>
  </div>

  <div v-else-if="loading" class="flex justify-center py-4">
    <span class="loading loading-spinner loading-sm" />
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  entityType: 'composants' | 'pieces' | 'products'
  entityId: string | null
}>()

const { data, loading, totalCount } = useUsedIn(
  computed(() => props.entityType),
  computed(() => props.entityId),
)
</script>
