<template>
  <div class="border border-base-200 rounded-md p-3 space-y-3">
    <div class="flex flex-wrap items-start justify-between gap-2">
      <div>
        <p class="text-sm font-semibold">
          {{ group.label }}
        </p>
        <p class="text-xs text-gray-500">
          Type : {{ group.typeName }} · Min {{ group.min }} ·
          {{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
        </p>
      </div>
      <span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
        {{ group.completed }} / {{ group.total || 0 }} complétée(s)
      </span>
    </div>

    <div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
      <ul class="list-disc pl-4 space-y-1">
        <li v-for="issue in group.issues" :key="issue.message">
          {{ issue.message }}
        </li>
      </ul>
    </div>

    <ul class="space-y-2">
      <li
        v-for="entry in group.entries"
        :key="entry.key"
        class="flex items-start gap-3"
      >
        <component
          :is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
          class="w-4 h-4 mt-0.5"
          :class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
          aria-hidden="true"
        />
        <div class="flex-1">
          <p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
            {{ entry.title }}
          </p>
          <p v-if="entry.subtitle" class="text-xs text-gray-500">
            {{ entry.subtitle }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { getStatusBadgeClass } from '~/composables/useMachineCreatePreview'
import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
import IconLucideCircle from '~icons/lucide/circle'

defineProps<{
  group: any
}>()
</script>
