import { type ReactNode } from 'react';

type FormSectionProps = {
    title: string;
    children: ReactNode;
    className?: string;
    action?: ReactNode;
};

/** Synto `box` wrapper for grouped admin form sections. */
export function FormSection({ title, children, className, action }: FormSectionProps) {
    return (
        <div className={className ?? 'box mb-6'}>
            <div className="box-header flex flex-wrap items-center justify-between gap-3">
                <h5 className="box-title">{title}</h5>
                {action}
            </div>
            <div className="box-body">{children}</div>
        </div>
    );
}