/**
 * Input 组件
 * 
 * 统一的输入框组件，遵循三层架构设计
 * 支持错误状态、多种尺寸（sm、md、lg）、全宽等
 * 使用 forwardRef 支持 ref 传递
 * 
 * @created 2025-11-22
 * @component
 */

'use client'

import { InputHTMLAttributes, forwardRef } from 'react'
import { useThemeStyles, cn } from '@/lib/ui-styles'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  error?: boolean
  size?: 'sm' | 'md' | 'lg'
  fullWidth?: boolean
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  (
    {
      error = false,
      size = 'md',
      fullWidth = true,
      className = '',
      ...props
    },
    ref
  ) => {
    const styles = useThemeStyles()

    const sizeClasses = {
      sm: styles.inputModifiers.compactXs,
      md: '',
      lg: 'px-5 py-4 text-base',
    }

    const inputClass = error ? styles.inputStyles.error : styles.inputStyles.base

    return (
      <input
        ref={ref}
        className={cn(
          inputClass,
          sizeClasses[size],
          !fullWidth && 'w-auto',
          className
        )}
        {...props}
      />
    )
  }
)

Input.displayName = 'Input'

export default Input