import { ReactNode } from 'react'
import { Text } from '../Text/index.js'
import { colors } from '../../utils/colors.js'
import { radius } from '../../utils/radius.js'

type FormFieldGroupProps = {
  label?: string
  description?: string
  children: ReactNode
  nested?: boolean
}

function FormFieldGroup({
  label,
  description,
  children,
  nested,
}: FormFieldGroupProps) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 24,
        ...(nested && {
          paddingLeft: 24,
          borderLeft: `1px solid ${colors.neutral20Adjusted}`,
        }),
      }}
    >
      {label && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <Text
            variant={nested ? 'display-bold' : 'subheading-bold'}
            color="neutral80"
          >
            {label}
          </Text>
          {description && (
            <Text variant="display-regular" color="neutral60">
              {description}
            </Text>
          )}
        </div>
      )}
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 24,
        }}
      >
        {children}
      </div>
    </div>
  )
}

export { FormFieldGroup }
export type { FormFieldGroupProps }
