import { AlertCircle, CheckCircle } from 'lucide-react'

export default function FormInput({
  label,
  type = 'text',
  value,
  onChange,
  placeholder,
  required = false,
  error,
  success,
  helpText,
  disabled = false,
  className = '',
  rows,
  ...props
}) {
  const hasError = Boolean(error)
  const hasSuccess = Boolean(success)
  const isTextarea = type === 'textarea'

  const inputClasses = `
    w-full px-3 py-2 text-sm border rounded-lg
    focus:outline-none focus:ring-2 transition-all
    ${hasError 
      ? 'border-red-300 focus:border-red-500 focus:ring-red-500/20' 
      : hasSuccess
      ? 'border-emerald-300 focus:border-emerald-500 focus:ring-emerald-500/20'
      : 'border-border focus:border-brand-primary focus:ring-brand-primary/20'
    }
    ${disabled ? 'bg-surface-tertiary cursor-not-allowed opacity-60' : 'bg-white'}
    ${className}
  `.trim()

  const InputComponent = isTextarea ? 'textarea' : 'input'

  return (
    <div className="space-y-1">
      {label && (
        <label className="block text-sm font-medium text-text-primary">
          {label}
          {required && <span className="text-red-500 ml-0.5">*</span>}
        </label>
      )}
      
      <div className="relative">
        <InputComponent
          type={isTextarea ? undefined : type}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          disabled={disabled}
          className={inputClasses}
          rows={rows}
          {...props}
        />
        
        {/* Validation icon */}
        {(hasError || hasSuccess) && (
          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
            {hasError ? (
              <AlertCircle className="w-4 h-4 text-red-500" />
            ) : (
              <CheckCircle className="w-4 h-4 text-emerald-500" />
            )}
          </div>
        )}
      </div>

      {/* Helper text or error message */}
      {(error || success || helpText) && (
        <p className={`text-xs ${hasError ? 'text-red-600' : hasSuccess ? 'text-emerald-600' : 'text-text-tertiary'}`}>
          {error || success || helpText}
        </p>
      )}
    </div>
  )
}
