import { type InputHTMLAttributes, forwardRef } from 'react'
import { cn } from '@/lib/utils'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string
  error?: string
  hint?: string
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, label, error, hint, ...props }, ref) => (
    <div className="flex flex-col gap-1 min-w-0">
      {label && (
        <label className="text-sm font-medium text-tg-hint">{label}</label>
      )}
      <input
        ref={ref}
        className={cn(
          'h-11 w-full rounded-xl bg-tg-secondary-bg px-3 text-tg-text placeholder:text-tg-hint',
          'outline-none focus:ring-2 focus:ring-tg-btn/40 transition-shadow',
          error && 'ring-2 ring-red-400',
          className
        )}
        {...props}
      />
      {error && <p className="text-xs text-red-500">{error}</p>}
      {hint && !error && <p className="text-xs text-tg-hint">{hint}</p>}
    </div>
  )
)
Input.displayName = 'Input'

interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string
  error?: string
}

const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, label, error, ...props }, ref) => (
    <div className="flex flex-col gap-1">
      {label && <label className="text-sm font-medium text-tg-hint">{label}</label>}
      <textarea
        ref={ref}
        rows={3}
        className={cn(
          'w-full rounded-xl bg-tg-secondary-bg px-3 py-2.5 text-tg-text placeholder:text-tg-hint',
          'outline-none focus:ring-2 focus:ring-tg-btn/40 transition-shadow resize-none',
          error && 'ring-2 ring-red-400',
          className
        )}
        {...props}
      />
      {error && <p className="text-xs text-red-500">{error}</p>}
    </div>
  )
)
Textarea.displayName = 'Textarea'

export { Input, Textarea }