<template>
  <div class="flex flex-wrap gap-3">
    <label v-for="option in options" :key="option.value" class="cursor-pointer group">
      <input 
        type="radio" 
        :name="name" 
        :value="option.value" 
        :checked="modelValue === option.value"
        @change="$emit('update:modelValue', option.value)"
        class="peer hidden"
      >
      <span class="px-4 py-2 border border-white/10 rounded-none text-xs font-mono text-white/50 hover:border-art-accent hover:text-white transition-all peer-checked:bg-art-accent peer-checked:text-black peer-checked:border-art-accent flex items-center gap-2">
        <i v-if="option.icon" :data-lucide="option.icon" class="w-3 h-3"></i>
        {{ option.label }}
      </span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { onUpdated, nextTick } from 'vue'

interface Option {
  label: string
  value: string
  icon?: string
}

defineProps<{
  name: string
  options: Option[]
  modelValue: string
}>()

const emit = defineEmits(['update:modelValue'])

onUpdated(() => {
  nextTick(() => {
    if ((window as any).lucide) {
      (window as any).lucide.createIcons()
    }
  })
})
</script>
