import { ReactNode } from 'react';
import { Box } from './Box';
import { Text } from './Text';

export interface FormSectionProps {
  title: string;
  description?: string;
  children: ReactNode;
}

export const FormSection = ({ 
  title, 
  description, 
  children 
}: FormSectionProps) => {
  return (
    <Box display="flex" flexDirection="col" gap={6}>
      <Box borderBottom paddingBottom={4}>
        <Text weight="bold" variant="high" size="lg" block>
          {title}
        </Text>
        {description && (
          <Text size="sm" variant="low">
            {description}
          </Text>
        )}
      </Box>
      <Box display="flex" flexDirection="col" gap={4}>
        {children}
      </Box>
    </Box>
  );
};