import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface SectionCardProps {
    title?: string;
    titleRight?: ReactNode;
    children: ReactNode;
    className?: string;
    bodyClassName?: string;
    footer?: ReactNode;
}

export function SectionCard({
    title,
    titleRight,
    children,
    className,
    bodyClassName,
    footer,
}: SectionCardProps) {
    return (
        <section
            className={cn(
                'flex flex-col overflow-hidden rounded-xl border border-[rgba(30,25,50,0.06)] bg-white shadow-[0_2px_8px_rgba(30,25,50,0.04)]',
                className,
            )}
        >
            {(title || titleRight) && (
                <div className="flex items-center justify-between border-b border-gray-100 bg-neutral-50 px-4 py-3">
                    {title && (
                        <h2 className="text-[11px] font-bold tracking-widest text-gray-400 uppercase">
                            {title}
                        </h2>
                    )}
                    {titleRight}
                </div>
            )}
            <div className={cn('flex flex-col', bodyClassName)}>{children}</div>
            {footer}
        </section>
    );
}