"use client";

import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
import { Label } from "@/components/ui/label";

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

export function LabeledField({ label, htmlFor, children, className, hint }: LabeledFieldProps) {
  return (
    <div className={cn("space-y-2", className)}>
      <Label htmlFor={htmlFor}>{label}</Label>
      {children}
      {hint ? <p className="text-[10px] text-muted-foreground">{hint}</p> : null}
    </div>
  );
}
