import React from 'react'
import styles from '@/app/styles/components/Input.module.css'

type InputVariant = 'default' | 'error' | 'success'
type InputSize = 'sm' | 'md' | 'lg'

interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
  variant?: InputVariant
  size?: InputSize
  error?: boolean
  success?: boolean
  helperText?: string
  label?: string
  required?: boolean
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      variant = 'default',
      size = 'md',
      error = false,
      success = false,
      helperText,
      label,
      required = false,
      className = '',
      ...props
    },
    ref
  ) => {
    const inputVariant = error ? 'error' : success ? 'success' : variant
    const variantClass = styles[`input--${inputVariant}`] || ''
    const sizeClass = size !== 'md' ? styles[`input--${size}`] : ''
    const inputClass = `${styles.input} ${variantClass} ${sizeClass} ${className}`.trim()

    return (
      <div className={styles.field}>
        {label && (
          <label className={styles.field__label}>
            {label}
            {required && ' *'}
          </label>
        )}
        <input
          ref={ref}
          className={inputClass}
          aria-invalid={error}
          {...props}
        />
        {helperText && (
          <span className={error ? styles.field__error : styles.field__helper}>
            {helperText}
          </span>
        )}
      </div>
    )
  }
)

Input.displayName = 'Input'

export default Input