import React, { ReactNode } from 'react';
import { Stack } from './Stack';
import { Text } from './Text';

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

/**
 * FormSection
 * 
 * Groups related form fields with an optional title.
 */
export function FormSection({ children, title }: FormSectionProps) {
  return (
    <Stack gap={4} fullWidth>
      {title && (
        <Text 
          size="xs" 
          weight="bold" 
          color="text-gray-500" 
          className="uppercase tracking-widest border-b border-border-gray pb-1"
        >
          {title}
        </Text>
      )}
      <Stack gap={4} fullWidth>
        {children}
      </Stack>
    </Stack>
  );
}