import type { ReactElement, ReactNode } from "react";
import { Box, Card, CardContent, Tabs } from "@mui/material";

interface TabbedCardProps {
	value: string;
	onChange: (value: string) => void;
	tabs: ReactElement[];
	children: ReactNode;
	contentSx?: object;
	tabsSx?: object;
}

export function TabbedCard({
	value,
	onChange,
	tabs,
	children,
	contentSx,
	tabsSx,
}: TabbedCardProps) {
	return (
		<Card variant="outlined">
			<CardContent sx={{ p: 0 }}>
				<Tabs
					value={value}
					onChange={(_, next) => onChange(String(next))}
					variant="scrollable"
					scrollButtons="auto"
					allowScrollButtonsMobile
					sx={{ px: 1, borderBottom: 1, borderColor: "divider", ...tabsSx }}
				>
					{tabs}
				</Tabs>
				<Box sx={{ p: 1.5, ...contentSx }}>{children}</Box>
			</CardContent>
		</Card>
	);
}