import type { ReactNode } from "react";

type PanelProps = {
    title?: ReactNode;
    extra?: ReactNode;
    children: ReactNode;
    className?: string;
};

export function Panel({ title, extra, children, className = "" }: PanelProps) {
    return (
        <div className={`rounded-xl border border-line/60 bg-white shadow-sm ${className}`}>
            {(title || extra) && (
                <div className="flex items-center justify-between border-b border-line/60 px-5 py-4">
                    {title && <h3 className="m-0 text-[15px] font-semibold text-ink">{title}</h3>}
                    {extra && <div>{extra}</div>}
                </div>
            )}
            <div className="p-5">{children}</div>
        </div>
    );
}