<script setup lang="ts">
import type { HTMLAttributes, InputHTMLAttributes } from 'vue'
import type { InputVariants } from '.'
import { computed } from 'vue'
import { cn } from '~/lib/utils'
import { inputVariants } from '.'

/**
 * Input component - Text input field with variants and two-way binding
 * Supports all native input attributes and custom styling variants
 */

interface Props {
  /** The input value */
  modelValue?: string | number
  /** Input type (text, email, password, etc.) */
  type?: InputHTMLAttributes['type']
  /** Placeholder text */
  placeholder?: string
  /** Whether the input is disabled */
  disabled?: boolean
  /** Whether the input is required */
  required?: boolean
  /** Input name attribute */
  name?: string
  /** Input ID attribute */
  id?: string
  /** Autocomplete attribute */
  autocomplete?: string
  /** Input variant */
  variant?: InputVariants['variant']
  /** Input size */
  size?: InputVariants['size']
  /** Custom CSS class */
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  variant: 'default',
  size: 'default',
})

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

// Two-way binding support using computed property
const modelValue = computed({
  get: () => props.modelValue ?? '',
  set: (value) => emits('update:modelValue', value),
})
</script>

<template>
  <input
    v-model="modelValue"
    :type="type"
    :class="cn(inputVariants({ variant, size }), props.class)"
    :placeholder="placeholder"
    :disabled="disabled"
    :required="required"
    :name="name"
    :id="id"
    :autocomplete="autocomplete"
  />
</template>
