<template>
  <button
    class="w-full text-left"
    @click="toggle"
  >
    <div
      class="flex items-start gap-3 p-4 rounded-xl transition-colors"
      :class="checked || auto ? 'bg-green-50/50 ring-1 ring-green-100' : 'bg-gray-50 hover:bg-gray-100'"
    >
      <UIcon
        :name="checked || auto ? 'i-heroicons-check-circle-solid' : 'i-heroicons-circle'"
        class="w-6 h-6 shrink-0"
        :class="checked || auto ? 'text-green-600' : 'text-gray-400'"
      />
      <div>
        <div class="font-bold text-gray-900">{{ title }}</div>
        <div class="text-sm text-gray-500 mt-0.5">{{ detail }}</div>
        <div v-if="auto && !checked" class="text-xs text-green-600 font-semibold mt-1">
          Automatisch erkannt ✓
        </div>
      </div>
    </div>
  </button>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean;
  title: string;
  detail: string;
  auto?: boolean;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const checked = computed(() => props.modelValue || props.auto);

function toggle() {
  emit("update:modelValue", !props.modelValue);
}
</script>
