import { Box, Typography } from "@mui/material";
import React, { FC } from "react";
import { TabPanelProps } from "./types";

const TabPanel: FC<TabPanelProps> = ({
  children,
  value = 0,
  index = 0,
  label = "",
  childrenProps = {},
  ...props
}) => {
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...props}
    >
      {value === index && <Box padding={3} {...childrenProps}>{children}</Box>}
    </div>
  );
};

export const TabContainer: FC<TabPanelProps> = ({
  children,
  value = 0,
  index = 0,
  label = "",
  childrenProps = {},
}) => {
  return (
    <TabPanel value={value} label={label} index={index} childrenProps={childrenProps}>
      {children}
    </TabPanel>
  );
};
