import type { ReactNode } from 'react'

/** 카테고리 섹션 (billing_react OrderFormLayout 이식) */
export function FormSection({
  title,
  desc,
  actions,
  children,
}: {
  title: string
  desc?: string
  actions?: ReactNode
  children: ReactNode
}) {
  return (
    <section className="popup-section of-section">
      <div className="of-section-head">
        <div className="of-section-titles">
          <h3 className="of-section-title">{title}</h3>
          {desc ? <p className="of-section-desc">{desc}</p> : null}
        </div>
        {actions ? <div className="of-section-actions">{actions}</div> : null}
      </div>
      <div className="of-section-body">{children}</div>
    </section>
  )
}

export function FormGroup({ label, children }: { label?: string; children: ReactNode }) {
  return (
    <div className="of-group">
      {label ? <div className="of-group-label">{label}</div> : null}
      {children}
    </div>
  )
}

export function FormGrid({ children, cols = 2 }: { children: ReactNode; cols?: 1 | 2 }) {
  return <div className={`of-grid of-grid-${cols}`}>{children}</div>
}

export function FormField({
  label,
  hint,
  full,
  children,
}: {
  label: string
  hint?: string
  full?: boolean
  children: ReactNode
}) {
  return (
    <div className={`of-field${full ? ' of-field-full' : ''}`}>
      <div className="of-field-meta">
        <span className="of-field-label">{label}</span>
        {hint ? <span className="of-field-hint">{hint}</span> : null}
      </div>
      <div className="of-field-control">{children}</div>
    </div>
  )
}

export function FormChoiceRow({ children }: { children: ReactNode }) {
  return <div className="of-choice-row">{children}</div>
}

export function FormChoice({ children }: { children: ReactNode }) {
  return <label className="of-choice">{children}</label>
}

export function FormBlock({
  title,
  actions,
  children,
}: {
  title?: string
  actions?: ReactNode
  children: ReactNode
}) {
  return (
    <div className="of-block">
      {(title || actions) && (
        <div className="of-block-head">
          {title ? <span className="of-block-title">{title}</span> : null}
          {actions ? <div className="of-block-actions">{actions}</div> : null}
        </div>
      )}
      {children}
    </div>
  )
}
