<template>
    <select
        :value="modelValue"
        :disabled="disabled"
        :class="selectClasses"
        @change="$emit('update:modelValue', $event.target.value)"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
    >
        <!-- Placeholder option -->
        <option v-if="placeholder" value="">{{ placeholder }}</option>

        <!-- Options from array -->
        <option
            v-for="option in options"
            :key="option.value"
            :value="option.value"
            :disabled="option.disabled"
        >
            {{ option.label }}
        </option>

        <!-- Slot for custom options -->
        <slot />
    </select>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: ''
    },
    options: {
        type: Array,
        default: () => []
    },
    placeholder: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    error: {
        type: Boolean,
        default: false
    }
})

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

const selectClasses = computed(() => {
    const baseClasses = 'block w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:border-transparent transition-colors bg-white'

    const stateClasses = props.error
        ? 'border-red-300 focus:ring-red-500 focus:border-red-500'
        : 'border-gray-300 focus:ring-blue-500 focus:border-blue-500'

    const disabledClasses = props.disabled
        ? 'bg-gray-50 text-gray-500 cursor-not-allowed'
        : ''

    return [baseClasses, stateClasses, disabledClasses].filter(Boolean).join(' ')
})
</script>
