import { Box, Divider, Stack } from "@mui/material";
import CallActions from "./CallActions";
import CallHistory from "./CallHistory";

const CallTabPanel = ({ tab }) => {
  return (
    <Stack
      role="tabpanel"
      id={`call-tabpanel-${tab.id}`}
      aria-labelledby={`call-tab-${tab.id}`}
      direction={"row"}
      sx={{
        height: "100%",
        display: !tab.active && "none",
        overflow: "hidden",
      }}
    >
      <Box sx={{ flex: 2 }}>
        <CallActions tab={tab} />
      </Box>
      <Divider variant="fullWidth" orientation="vertical" />
      <Box sx={{ flex: 1 }}>
        <CallHistory tab={tab} />
      </Box>
    </Stack>
  );
};

export default CallTabPanel;
