<template>
    <div class="relative">
        <!-- Text Input -->
        <input
            v-if="type !== 'textarea'"
            :type="type"
            :value="modelValue"
            :placeholder="placeholder"
            :disabled="disabled"
            :readonly="readonly"
            :min="min"
            :max="max"
            :step="step"
            :class="inputClasses"
            @input="$emit('update:modelValue', $event.target.value)"
            @focus="$emit('focus', $event)"
            @blur="$emit('blur', $event)"
        />

        <!-- Textarea -->
        <textarea
            v-else
            :value="modelValue"
            :placeholder="placeholder"
            :disabled="disabled"
            :readonly="readonly"
            :rows="rows"
            :class="inputClasses"
            @input="$emit('update:modelValue', $event.target.value)"
            @focus="$emit('focus', $event)"
            @blur="$emit('blur', $event)"
        ></textarea>

        <!-- Slot for additional content (like show/hide password button) -->
        <slot name="append" />
    </div>
</template>

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

const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: ''
    },
    type: {
        type: String,
        default: 'text',
        validator: (value) => ['text', 'password', 'email', 'number', 'textarea'].includes(value)
    },
    placeholder: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    readonly: {
        type: Boolean,
        default: false
    },
    rows: {
        type: Number,
        default: 3
    },
    min: {
        type: Number,
        default: undefined
    },
    max: {
        type: Number,
        default: undefined
    },
    step: {
        type: Number,
        default: undefined
    },
    error: {
        type: Boolean,
        default: false
    }
})

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

const inputClasses = 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>
