<script setup>
import { Check } from 'lucide-vue-next'

defineProps({
  icon: {
    type: [Object, Function],
    required: true,
  },
  isActive: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
})

defineEmits(['select'])
</script>

<template>
  <button
    type="button"
    :class="[
      'w-full p-6 rounded-2xl cursor-pointer transition-all flex items-center justify-between border text-left',
      isActive
        ? 'bg-white border-brand-orange shadow-[0_8px_30px_rgba(249,115,22,0.15)]'
        : 'bg-white/50 backdrop-blur-sm border-white/60 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:bg-white hover:border-slate-200',
    ]"
    @click="$emit('select')"
  >
    <div class="flex items-center gap-4">
      <div
        :class="[
          'w-12 h-12 rounded-xl flex items-center justify-center transition-colors',
          isActive
            ? 'bg-brand-orange text-white shadow-md shadow-brand-orange/20'
            : 'bg-white text-slate-400 shadow-sm border border-slate-100',
        ]"
      >
        <component :is="icon" class="w-6 h-6" />
      </div>

      <div>
        <h3 class="font-bold text-slate-900">{{ label }}</h3>
        <p class="text-sm text-slate-500">{{ description }}</p>
      </div>
    </div>

    <div
      :class="[
        'w-6 h-6 rounded-full flex items-center justify-center transition-colors',
        isActive ? 'bg-brand-orange' : 'bg-slate-200',
      ]"
    >
      <Check v-if="isActive" class="w-3.5 h-3.5 text-white" />
    </div>
  </button>
</template>
