import { Typography } from '@komi-app/components'
import classNames from 'classnames'
import React from 'react'
import './FormSectionLayout.scss'

type FormSectionLayoutProps = {
  label: string
  switchComponent?: React.ReactNode
  direction?: 'horizontal' | 'vertical'
  disabled?: boolean
  children:
    | React.ReactNode
    | ((props: { disabled: boolean }) => React.ReactNode)
}

function FormSectionLayout({
  label,
  switchComponent,
  children,
  disabled = false
}: FormSectionLayoutProps) {
  return (
    <div
      className={classNames('form-section', {
        'form-section--disabled': disabled
      })}
    >
      <div className="form-section__header">
        <Typography.Heading level={4}>{label}</Typography.Heading>
        {switchComponent}
      </div>
      <div className="form-section__body">
        {typeof children === 'function' ? children({ disabled }) : children}
      </div>
    </div>
  )
}

export default FormSectionLayout
