import { PropsWithChildren, FC } from "react";

export type SectionProps = PropsWithChildren<{
    title: string;
}>;

export const Section: FC<SectionProps> = (props) => {
    const { title, children } = props;

    return (
        <section className='mx-auto w-full max-w-[1362px] grow p-3 md:px-8 md:py-4 xl:border-x'>
            <div className='flex flex-col border-b pb-7 xl:flex-row'>
                <div className='shrink-0 xl:w-67'>
                    <h2 className='text-border mb-4 text-xl leading-none font-bold md:text-3xl'>{title}</h2>
                </div>

                <div className='w-full'>{children}</div>
            </div>
        </section>
    );
};