import clsx from "clsx";

function Field({ label, hint, error, children }) {
  return (
    <div className="flex flex-col gap-1.5">
      <div className="font-mono text-[12px] font-medium tracking-[0.02em] text-fg-secondary">
        {label}
      </div>
      {children}
      {(hint || error) && (
        <div className={clsx("text-[11px]", error ? "text-error-fg" : "text-fg-tertiary")}>
          {error || hint}
        </div>
      )}
    </div>
  );
}

window.Field = Field;