export function Field({
    label,
    hint,
    error,
    ...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>
            <input
                {...input}
                className="rounded border border-rule bg-panel-2 px-2.5 py-2 font-mono text-ink"
            />
            {error ? (
                <span className="text-[0.82rem] text-expired">{error}</span>
            ) : hint ? (
                <span className="text-[0.82rem] text-ink-3">{hint}</span>
            ) : null}
        </label>
    );
}