import type { InputHTMLAttributes } from "react";

type Props = InputHTMLAttributes<HTMLInputElement> & {
  label?: string;
  hint?: string;
  /** 欄位旁錯誤（比頁首 banner 更直覺） */
  error?: string;
};

export function Input({ label, hint, error, id, className = "", ...rest }: Props) {
  const inputId = id || rest.name;
  const errId = error && inputId ? `${inputId}-error` : undefined;
  return (
    <label className={`hb-field${error ? " is-invalid" : ""}`} htmlFor={inputId}>
      {label ? <span className="hb-field__label">{label}</span> : null}
      <input
        id={inputId}
        className={`hb-input ${className}`.trim()}
        aria-invalid={error ? true : undefined}
        aria-describedby={errId}
        {...rest}
      />
      {error ? (
        <span className="hb-field__error" id={errId} role="alert">
          {error}
        </span>
      ) : hint ? (
        <span className="hb-field__hint">{hint}</span>
      ) : null}
    </label>
  );
}
