<script setup>
defineProps({
    modelValue: {
        type: String,
        required: true
    },
    label: {
        type: String,
        required: true
    },
    options: {
        type: Array,
        required: true
    },
    error: {
        type: String,
        default: null
    }
});

defineEmits(['update:modelValue']);
</script>

<template>
    <div class="field md:col-span-2 space-y-2">
        <p class="text-xs font-medium text-surface-600 dark:text-surface-300">{{ label }}</p>
        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
            <div
                v-for="option in options"
                :key="option.value"
                class="flex items-start gap-2 rounded-xl border px-4 py-3 text-left text-sm transition cursor-pointer"
                :class="{
                    'border-primary-500 bg-primary-50 text-primary-900 shadow-sm dark:border-primary-400 dark:bg-primary-900/30 dark:text-primary-50': modelValue === option.value,
                    'border-surface-200 bg-surface-0 text-surface-900 hover:border-primary-200 hover:bg-primary-50/40 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-100 dark:hover:border-primary-500/60': modelValue !== option.value
                }"
                @click="$emit('update:modelValue', option.value)"
            >
                <span class="font-medium">{{ option.label }}</span>
            </div>
        </div>
        <small v-if="error" class="p-error">{{ error }}</small>
    </div>
</template>
