<template>
    <Label class="my-2 flex flex-1 items-center justify-between flex-col md:flex-row">
        <span class="pb-1 md:p-0">{{ label }}</span>
        <input :placeholder="placeholder" :disabled="disabled"
            class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
        bg-light-20 dark:bg-dark-20 appearance-none outline-hidden px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 focus:dark:shadow-dark-40
        border border-light-35 dark:border-dark-35 hover:border-light-50 hover:dark:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
            :type="type" v-model="model" :data-disabled="disabled || undefined" v-bind="$attrs" @change="(e) => emits('change', e)" @input="(e) => emits('input', e)">
    </Label>
</template>

<script setup lang="ts">
const { type = 'text', label, disabled = false, placeholder } = defineProps<{
    type?: 'text' | 'password' | 'email' | 'tel' | 'url'
    label?: string
    disabled?: boolean
    placeholder?: string
}>();

const emits = defineEmits<{
    change: [Event]
    input: [Event]
}>();
const model = defineModel<string>();
</script>