import type { ReactNode } from 'react';
import { FoxFormLabel } from '@fox/core/components/fox-form-label';
import styles from './content-form.module.scss';

interface ContentFormRowProps {
  label: string;
  required?: boolean;
  optionalText?: string;
  children: ReactNode;
}

/** 등록·수정 폼의 한 줄 — 시안의 「라벨 | 입력」 2열 구조. */
export function ContentFormRow({
  label,
  required,
  optionalText,
  children,
}: ContentFormRowProps) {
  return (
    <div className={styles.row}>
      <div className={styles.label}>
        <FoxFormLabel
          as="span"
          requirement={required ? 'required' : optionalText ? 'optional' : undefined}
          optionalText={optionalText}
        >
          {label}
        </FoxFormLabel>
      </div>
      <div className={styles.field}>{children}</div>
    </div>
  );
}