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

interface SelectionRailCardProps {
	title: string;
	description?: string;
	children: ReactNode;
	footer?: ReactNode;
	minHeight?: number;
	/** Legacy MUI `sx` passthroughs; retained for API compatibility (no-op). */
	contentSx?: object;
	/** Legacy MUI `sx` passthroughs; retained for API compatibility (no-op). */
	bodySx?: object;
}

/**
 * Selection-rail surface: titled header, scrollable body, optional footer.
 *
 * Preserves the exported props (`minHeight`, `footer`, and the legacy `*Sx`
 * no-op passthroughs) so consuming pages (Actions, Settings) compile
 * unchanged. The scrollable body and footer contract are preserved.
 */
export function SelectionRailCard({
	title,
	description,
	children,
	footer,
	minHeight = 420,
}: SelectionRailCardProps) {
	return (
		<Card className="h-fit self-start py-0" style={{ minHeight }}>
			<div className="flex flex-col" style={{ minHeight }}>
				<div className="border-b bg-muted/50 px-4 py-3">
					<h4 className="text-sm font-semibold tracking-wide">{title}</h4>
					{description ? (
						<p className="text-xs text-muted-foreground">{description}</p>
					) : null}
				</div>
				<div className="flex-1 overflow-y-auto">{children}</div>
				{footer ? <div className="border-t bg-card p-3">{footer}</div> : null}
			</div>
		</Card>
	);
}