import type { ReactNode } from "react";

interface FieldProps {
  label: string;
  children: ReactNode;
  /** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */
  className?: string;
}

/**
 * 폼 라벨 + 값 배치. `<label>`이 children을 함께 감싸 암시적 라벨 연결(implicit label)을
 * 제공한다 — 조회 팝업에서 readOnly `Input`을 감싸는 용도.
 */
export function Field({ label, children, className }: FieldProps) {
  return (
    <label className={`flex flex-col gap-1 ${className ?? ""}`}>
      <span className="text-label-md text-foreground-muted">{label}</span>
      {children}
    </label>
  );
}