import type { ReactNode } from "react";
import { Card, CardContent } from "@/components/ui/card";

interface SectionCardProps {
	title: string;
	description?: string;
	action?: ReactNode;
	children: ReactNode;
}

/**
 * Titled section surface built on the shadcn Card family.
 *
 * Comfortable density: `gap-4` between the header row and the body. Exports
 * the same props/display name as the prior MUI implementation so every
 * consuming page compiles unchanged.
 */
export function SectionCard({
	title,
	description,
	action,
	children,
}: SectionCardProps) {
	return (
		<Card className="gap-4">
			<CardContent className="flex flex-col gap-4">
				<div className="flex flex-wrap items-center justify-between gap-2">
					<div className="min-w-0">
						<h3 className="text-base font-semibold">{title}</h3>
						{description ? (
							<p className="text-sm text-muted-foreground">{description}</p>
						) : null}
					</div>
					{action}
				</div>
				{children}
			</CardContent>
		</Card>
	);
}
