import { cn } from '@/lib/utils'

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: string
}

export function Input({ className, error, id, ...props }: InputProps) {
  return (
    <div>
      <input
        id={id}
        className={cn(
          'flex h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
          'placeholder:text-[#848b9b]',
          'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
          'disabled:cursor-not-allowed disabled:opacity-50',
          error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
          className
        )}
        aria-invalid={error ? true : undefined}
        aria-describedby={error && id ? `${id}-error` : undefined}
        {...props}
      />
      {error && (
        <p
          id={id ? `${id}-error` : undefined}
          className="mt-1.5 text-xs text-red-400"
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  )
}
