/**
 * 📄 Form Section Component
 * 폼 섹션 컴포넌트
 *
 * - 폼 필드 렌더링 및 제목 표시
 * - 필수 입력 필드 표시 (별표 표시)
 * - FormField를 통한 폼 상태 관리
 * - 그리드 레이아웃을 통한 정렬 및 배치
 * - 재사용 가능한 폼 섹션 구조 제공
 * - react-hook-form 통합 지원
 */
import { FormField } from '@common/business_components/ui'
import React, { type ReactElement } from 'react'

interface FormSectionProps {
  children: ReactElement
  titleNm: string
  form: any
  name: string
  required?: boolean
}

const FormSection = ({ children, titleNm, form, name, required }: FormSectionProps) => {
  return (
    <div className="grid grid-cols-[200px_1fr] items-center">
      <div className="text-xl font-medium">{titleNm}{required && <span className="text-2xl text-red-500">*</span>}</div>
      <FormField
        control={form.control}
        name={name}
        render={({ field }) => children}
      />
    </div>
  )
}

export default FormSection