import type { ReactNode } from "react";

export function SectionCard({
  title,
  description,
  children,
  footer,
}: {
  title: string;
  description?: string;
  children: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <section className="rounded-2xl bg-white shadow-sm ring-1 ring-gray-100">
      <header className="border-b border-gray-100 px-6 py-5">
        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
        {description ? <p className="mt-1 text-sm text-gray-500">{description}</p> : null}
      </header>
      <div className="space-y-5 px-6 py-6">{children}</div>
      {footer ? <div className="border-t border-gray-100 px-6 py-4">{footer}</div> : null}
    </section>
  );
}