<template>
    <div :class="['flex flex-row items-center gap-2', wrapperClass]">
        <label
            v-if="label && label !== 'Autres'"
            :for="id"
            class="font-bold text-xl"
            :class="labelClass"
        >
            {{ label }} <span v-if="code">({{ code }})</span>
        </label>

        <!-- Champ texte si Autres -->
        <input
            v-else-if="label === 'Autres'"
            type="text"
            :placeholder="'Autres'"
            class="border-b border-black text-xl bg-transparent- w-48"
        />
        <input
            :id="id"
            type="number"
            :value="modelValue ?? 0"
            :placeholder="placeholder"
            :min="min"
            :max="max"
            :step="step"
            :disabled="disabled"
            v-bind="attrs"
            class="border-2  border-black text-xl pb-[6px] w-12 bg-transparent ma"
            :class="[
                disabled ? 'cursor-not-allowed text-neutral-400' : 'cursor-text text-black',
                inputClass
            ]"
            @input="onInput"
        >
    </div>
</template>

<script setup lang="ts">
import {useAttrs} from 'vue'

defineOptions({inheritAttrs: false})

const props = withDefaults(
    defineProps<{
        id?: string
        label?: string
        code?: string
        modelValue: number | null | undefined
        placeholder?: string
        min?: number
        max?: number
        step?: number
        disabled?: boolean
        wrapperClass?: string
        labelClass?: string
        inputClass?: string
    }>(),
    {
        placeholder: '',
        min: 0,
        step: 1,
        disabled: false,
        wrapperClass: '',
        labelClass: '',
        inputClass: ''
    }
)
const emit = defineEmits<{
    (event: 'update:modelValue', value: number): void
}>()

const attrs = useAttrs()

const onInput = (event: Event) => {
    const target = event.target as HTMLInputElement
    emit('update:modelValue', Number(target.value))
}
</script>
