<template>
  <button
    type="button"
    class="choice-card group relative flex flex-col items-center p-6 rounded-xl border-2 transition-all duration-300 focus:outline-none"
    :class="[
      selected
        ? 'border-sky-accent bg-sky-accent/10 scale-105 shadow-lg shadow-sky-accent/20'
        : 'border-sky-text/20 bg-sky-dark/50 hover:border-sky-accent/50 hover:bg-sky-dark/80',
      disabled && 'opacity-50 cursor-not-allowed',
    ]"
    :style="{ '--zone-color': choice.zoneColor }"
    :disabled="disabled"
    :aria-checked="selected"
    role="radio"
    @click="emit('select')"
  >
    <!-- Glow effect au hover -->
    <div
      class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
      :style="{ boxShadow: `0 0 30px ${choice.zoneColor}40` }"
    />

    <!-- Icône -->
    <div
      class="w-16 h-16 rounded-full flex items-center justify-center text-4xl mb-4"
      :style="{ backgroundColor: `${choice.zoneColor}20` }"
    >
      {{ choice.icon }}
    </div>

    <!-- Texte narratif -->
    <p class="font-narrative text-lg text-sky-text text-center leading-relaxed">
      {{ text }}
    </p>

    <!-- Indicateur de sélection -->
    <div
      v-if="selected"
      class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-sky-accent flex items-center justify-center"
    >
      <span class="text-white text-sm">&#x2713;</span>
    </div>
  </button>
</template>

<script setup lang="ts">
import type { Choice } from '~/types/choice'

const props = defineProps<{
  choice: Choice
  selected: boolean
  disabled: boolean
}>()

const emit = defineEmits<{
  select: []
}>()

const { locale } = useI18n()

const text = computed(() => {
  return locale.value === 'fr' ? props.choice.textFr : props.choice.textEn
})
</script>

<style scoped>
.choice-card:focus-visible {
  outline: 2px solid var(--sky-accent, #38bdf8);
  outline-offset: 4px;
}

.choice-card:not(:disabled):hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .choice-card,
  .choice-card * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .choice-card:not(:disabled):hover {
    transform: none !important;
  }
}
</style>
