import React, { ReactNode } from 'react';
import { SectionTitle } from '../ui/Typography';

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

export const FormSection: React.FC<FormSectionProps> = ({
    title,
    children,
    className = '',
    titleClassName = '',
}) => {
    return (
        <div className={className}>
            <SectionTitle className={`mb-4 ${titleClassName}`}>
                {title}
            </SectionTitle>
            {children}
        </div>
    );
};

