import { ReactNode } from "react";

type FormFieldProps = {
  label: string;
  hint?: string;
  children: ReactNode;
  className?: string;
};

export function FormField({ label, hint, children, className = "" }: FormFieldProps) {
  return (
    <label className={`block space-y-1.5 ${className}`}>
      <span className="block text-xs font-black uppercase text-gray-400">{label}</span>
      {children}
      {hint ? <span className="block text-xs font-bold text-gray-400">{hint}</span> : null}
    </label>
  );
}

export const inputClassName = "w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-950 outline-none transition focus:border-[#0F766E] focus:ring-2 focus:ring-[#0F766E]/10 disabled:bg-gray-50 disabled:text-gray-400";