import type { ReactNode } from 'react'
import { Field } from './components'

/** Two-column field grid for dialog bodies; single column under 560px. */
export function FormGrid(props: { children: ReactNode }) {
  return <div className="wf-formgrid">{props.children}</div>
}

export function FormField(props: { label: string; wide?: boolean; children: ReactNode }) {
  return (
    <div className={props.wide === true ? 'wide' : undefined}>
      <Field label={props.label}>{props.children}</Field>
    </div>
  )
}