<script setup lang="ts">
export type InputSize = 'xs' | 'sm' | 'md' | 'xl'

interface Props {
  modelValue?: string | number
  size?: InputSize
  type?: string
  placeholder?: string
  disabled?: boolean
  error?: boolean
  errorMessage?: string
  label?: string
  required?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  size: 'md',
  type: 'text',
  placeholder: '',
  disabled: false,
  error: false
})

const emit = defineEmits<{
  'update:modelValue': [value: string | number]
}>()

const sizeClasses: Record<InputSize, string> = {
  xs: 'px-2 py-1 text-xs rounded',
  sm: 'px-3 py-1.5 text-sm rounded-md',
  md: 'px-4 py-2 text-base rounded-lg',
  xl: 'px-5 py-3 text-lg rounded-xl'
}

const labelSizeClasses: Record<InputSize, string> = {
  xs: 'text-xs mb-0.5',
  sm: 'text-sm mb-1',
  md: 'text-sm mb-1.5',
  xl: 'text-base mb-2'
}
</script>

<template>
  <div class="w-full">
    <label
      v-if="props.label"
      :class="[
        'block font-medium text-gray-700 dark:text-gray-300',
        labelSizeClasses[props.size]
      ]"
    >
      {{ props.label }}
      <span v-if="props.required" class="text-red-500">*</span>
    </label>
    <input
      :value="props.modelValue"
      :type="props.type"
      :placeholder="props.placeholder"
      :disabled="props.disabled"
      :class="[
        'w-full border transition-all duration-200',
        'bg-white dark:bg-gray-900',
        'text-gray-900 dark:text-gray-100',
        'placeholder-gray-400 dark:placeholder-gray-500',
        'focus:outline-none focus:ring-2 focus:ring-flux-500 focus:border-transparent',
        'disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100 dark:disabled:bg-gray-800',
        sizeClasses[props.size],
        props.error 
          ? 'border-red-500 focus:ring-red-500' 
          : 'border-gray-300 dark:border-gray-600'
      ]"
      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
    />
    <p
      v-if="props.error && props.errorMessage"
      class="mt-1 text-sm text-red-500"
    >
      {{ props.errorMessage }}
    </p>
  </div>
</template>
