import type { ReactNode } from "react";
import Card from "./Card";
import PanelHeader from "./PanelHeader";
import { cx } from "./cx";

interface PageSectionCardProps {
  title: ReactNode;
  children: ReactNode;
  eyebrow?: ReactNode;
  detail?: ReactNode;
  action?: ReactNode;
  className?: string;
  headerClassName?: string;
  bodyClassName?: string;
}

export default function PageSectionCard({
  title,
  children,
  eyebrow,
  detail,
  action,
  className,
  headerClassName,
  bodyClassName,
}: PageSectionCardProps) {
  return (
    <Card className={cx("overflow-hidden rounded-[24px]", className)}>
      <PanelHeader
        variant="section"
        eyebrow={eyebrow}
        title={title}
        detail={detail}
        action={action}
        className={headerClassName}
      />
      <div className={bodyClassName}>{children}</div>
    </Card>
  );
}