import { type InputHTMLAttributes, forwardRef } from "react"

interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
  error?: string
}

const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
  ({ className = "", error, ...rest }, ref) => (
    <input
      ref={ref}
      className={`w-full rounded-xl border bg-white px-4 py-2.5 text-sm text-gray-800 placeholder-gray-300 transition-colors duration-200 outline-none focus:border-sky-300 focus:ring-2 focus:ring-sky-100 ${
        error ? "border-red-300 focus:border-red-400 focus:ring-red-100" : "border-gray-200"
      } ${className}`}
      {...rest}
    />
  ),
)
InputField.displayName = "InputField"

function InputRoot({ className = "", children, ...rest }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={`space-y-1.5 ${className}`} {...rest}>
      {children}
    </div>
  )
}

function InputLabel({ className = "", children, ...rest }: React.HTMLAttributes<HTMLLabelElement>) {
  return (
    <label className={`block text-xs font-medium text-gray-500 ${className}`} {...rest}>
      {children}
    </label>
  )
}

function InputHint({ className = "", children, ...rest }: React.HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={`mt-1 text-[11px] text-gray-400 ${className}`} {...rest}>
      {children}
    </p>
  )
}

export { InputField, InputRoot, InputLabel, InputHint }
