import { Children, type LabelHTMLAttributes, type ReactNode } from "react";

type Props = LabelHTMLAttributes<HTMLLabelElement> & { children: ReactNode; hint?: string };

export function Label({ children, hint, className = "", ...rest }: Props) {
  const [label, ...fields] = Children.toArray(children);

  return (
    <label className={`flex flex-col gap-2.5 text-sm text-zinc-300 ${className}`} {...rest}>
      <span className="flex flex-col gap-1">
        <span className="font-medium">{label}</span>
        {hint ? <span className="text-xs text-zinc-500">{hint}</span> : null}
      </span>
      {fields}
    </label>
  );
}