Papo/frontend/src/components/shared/SectionCard.tsx

import { Card, CardHeader, CardContent, CardTitle, CardDescription } from '@heroui/react';
import type { ReactNode } from 'react';

type Props = {
  title: string;
  subtitle?: string;
  children: ReactNode;
  action?: ReactNode;
};

export function SectionCard({ title, subtitle, children, action }: Props) {
  return (
    <Card className="bg-surface-secondary">
      <CardHeader className="flex items-start justify-between gap-4">
        <div className="min-w-0 flex flex-col gap-1">
          <CardTitle>{title}</CardTitle>
          {subtitle && <CardDescription>{subtitle}</CardDescription>}
        </div>
        {action && <div className="shrink-0">{action}</div>}
      </CardHeader>
      <CardContent>{children}</CardContent>
    </Card>
  );
}