import { clx } from '@/helpers/utils'
import { type FC, type ReactNode } from 'react'

type HomeSectionProps = {
    title?: string
    children: ReactNode
    className?: string
    contentClassName?: string
}

const HomeSection: FC<HomeSectionProps> = ({
    title,
    children,
    className,
    contentClassName,
}) => {
    return (
        <section
            className={clx(
                'rounded-2xl bg-white p-4 md:rounded-3xl md:p-6',
                className,
            )}
        >
            {title ? (
                <h2 className='text-base font-light md:text-lg'>{title}</h2>
            ) : null}
            <div className={clx(title && 'mt-4 md:mt-6', contentClassName)}>
                {children}
            </div>
        </section>
    )
}

export default HomeSection