import { controlClass } from "./Button";

export function Field({
    label,
    hint,
    error,
    className,
    ...input
}: React.InputHTMLAttributes<HTMLInputElement> & {
    label: string;
    hint?: React.ReactNode;
    error?: string;
}) {
    return (
        <label className="grid max-w-md gap-1.5">
            <span className="font-mono text-[0.72rem] uppercase tracking-[0.1em] text-ink-3">{label}</span>
            {/*
             * className is pulled out of the spread rather than left in it: it
             * used to be spread onto the input and then overwritten by the
             * hardcoded one below, so a caller passing className got nothing and
             * no warning.
             */}
            <input {...input} className={controlClass(className)} aria-invalid={error ? true : undefined} />
            {error ? <span className="text-[0.82rem] text-expired">{error}</span> : hint ? <span className="text-[0.82rem] text-ink-3">{hint}</span> : null}
        </label>
    );
}