import { Card, CardHeader, CardContent } 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="border border-default-100 bg-gradient-to-b from-default-50/40 to-background">
      <CardHeader className="flex items-start justify-between gap-4 px-6 pt-6 pb-0">
        <div className="min-w-0">
          <h2 className="text-xl font-bold tracking-tight">{title}</h2>
          {subtitle && <p className="mt-1 text-small text-default-500">{subtitle}</p>}
        </div>
        {action && <div className="shrink-0">{action}</div>}
      </CardHeader>
      <CardContent className="px-6 py-5">{children}</CardContent>
    </Card>
  );
}