<script setup>
import { usoCfdiOptions } from '@/utils/fiscalData';

const props = defineProps({
    modelValue: { type: String, default: '' },
    error: { type: String, default: null },
    required: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false }
});

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

<template>
    <div>
        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
            USO DE CFDI <span v-if="required" class="text-red-500">*</span>
        </label>
        <select
            :value="modelValue"
            :disabled="disabled"
            :required="required"
            @change="emit('update:modelValue', $event.target.value)"
            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 disabled:opacity-50"
            :class="{ 'border-red-500': error }"
        >
            <option value="" disabled>Seleccionar uso de CFDI</option>
            <option
                v-for="option in usoCfdiOptions"
                :key="option.value"
                :value="option.value"
            >
                {{ option.label }}
            </option>
        </select>
        <p v-if="error" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ error }}</p>
    </div>
</template>