import { type InputHTMLAttributes, forwardRef } from "react";
import { LabelWithHint } from "@/components/ui/Tooltip";

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

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, hint, hintLabel, error, className = "", id, ...props }, ref) => {
    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");

    return (
      <div className="space-y-1.5">
        {label &&
          (hint ? (
            <LabelWithHint label={label} hint={hint} htmlFor={inputId} hintLabel={hintLabel} />
          ) : (
            <label htmlFor={inputId} className="block text-sm font-medium text-[var(--text-muted)]">
              {label}
            </label>
          ))}
        <input
          ref={ref}
          id={inputId}
          aria-invalid={error ? true : undefined}
          aria-describedby={error ? `${inputId}-error` : undefined}
          className={`w-full px-3.5 py-2.5 bg-[var(--bg-elevated)] border rounded-lg text-[var(--text)] placeholder:text-[var(--text-faint)] focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40 focus:border-[var(--accent)]/60 transition text-sm disabled:opacity-60 disabled:cursor-not-allowed ${
            error ? "border-red-500/50" : "border-[var(--border)]"
          } ${className}`}
          {...props}
        />
        {error && (
          <p id={`${inputId}-error`} className="text-xs text-red-400" role="alert">
            {error}
          </p>
        )}
      </div>
    );
  }
);

Input.displayName = "Input";
export default Input;