import type { ReactElement, ReactNode } from "react";
import { Card } from "@/components/ui/card";
import { Tabs, TabsList } from "@/components/ui/tabs";

interface TabbedCardProps {
	value: string;
	onChange: (value: string) => void;
	tabs: ReactElement[];
	children: ReactNode;
	/** Legacy MUI `sx` passthroughs; retained for API compatibility (no-op). */
	contentSx?: object;
	/** Legacy MUI `sx` passthroughs; retained for API compatibility (no-op). */
	tabsSx?: object;
}

/**
 * Card surface with a line-style tab bar on top and a content area below.
 *
 * `value`/`onChange` stay string-typed (controlled) and the `tabs` prop stays
 * `ReactElement[]`, so consuming pages compile unchanged. The page owns the
 * rendered content from `children` keyed off `value`, exactly as before.
 */
export function TabbedCard({
	value,
	onChange,
	tabs,
	children,
}: TabbedCardProps) {
	return (
		<Card className="gap-0 py-0">
			<Tabs value={value} onValueChange={(next) => onChange(String(next))}>
				<div className="border-b px-2">
					<TabsList variant="line">{tabs}</TabsList>
				</div>
				<div className="p-4">{children}</div>
			</Tabs>
		</Card>
	);
}