<template>
    <div :class="['flex flex-col', wrapperClass]">
        <label
            v-if="label"
            :for="id"
            class="font-bold uppercase text-xl mb-2"
            :class="labelClass"
        >
            {{ label }}
        </label>
        <input
            :id="id"
            type="text"
            :value="modelValue ?? ''"
            :placeholder="placeholder"
            :maxlength="maxlength"
            :disabled="disabled"
            v-bind="attrs"
            class="border-b border-black text-xl pb-[6px] bg-transparent"
            :class="[
                isEmpty ? 'text-neutral-400' : 'text-black',
                disabled ? 'cursor-not-allowed' : 'cursor-text',
                inputClass
            ]"
            @input="onInput"
        >
    </div>
</template>

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

defineOptions({ inheritAttrs: false })

const props = withDefaults(
    defineProps<{
        id?: string
        label?: string
        modelValue: string | null | undefined
        placeholder?: string
        maxlength?: number | string
        disabled?: boolean
        wrapperClass?: string
        labelClass?: string
        inputClass?: string
    }>(),
    {
        placeholder: '',
        maxlength: undefined,
        disabled: false,
        wrapperClass: '',
        labelClass: '',
        inputClass: ''
    }
)

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const attrs = useAttrs()
const isEmpty = computed(() => !props.modelValue)

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