import { Box } from "@mui/material";
import { FC } from "react";

export interface TabPanelProps {
	children?: React.ReactNode;
	index: number;
	value: number;
}

export const TabPanel: FC<TabPanelProps> = (props) => {
	const { children, value, index, ...other } = props;

	return (
		<div
			className="overflow-hidden w-100 h-100"
			role="tabpanel"
			hidden={value !== index}
			id={`tabpanel-${index}`}
			aria-labelledby={`tab-${index}`}
			{...other}
		>
			{value === index && (
				<Box
					className="h-100 overflow-hidden"
					sx={{
						width: "100%",
					}}
				>
					{children}
				</Box>
			)}
		</div>
	);
};
