import React from "react";
import {
	Card,
	CardHeader,
	CardTitle,
	CardDescription,
	CardContent,
	CardAction,
} from "@/components/ui/card";

/**
 * ExplorerSectionCard
 *
 * A reusable Card wrapper for Explorer content blocks.
 * Keeps all levels visually consistent (spacing, typography, optional "count" badge).
 *
 * @param {{
 *   title: string,
 *   description?: string|null,
 *   headerRight?: React.ReactNode,
 *   children: React.ReactNode
 * }} props
 */
export default function ExplorerSectionCard({
	title,
	description = null,
	headerRight = null,
	children,
}) {
	return (
		<Card>
			<CardHeader>
				<CardTitle>{title}</CardTitle>
				{description ? <CardDescription>{description}</CardDescription> : null}
				{headerRight ? <CardAction>{headerRight}</CardAction> : null}
			</CardHeader>

			<CardContent>{children}</CardContent>
		</Card>
	);
}