import { useCall } from "@/lib/contexts/call";
import { Close } from "@mui/icons-material";
import { IconButton, Stack, Zoom } from "@mui/material";
import CallTabDetails from "./CallTabDetails";

const CallTabLabel = ({ tab, index }) => {
  const { closeCall, activeCall } = useCall();
  const handleCloseClick = (id) => {
    closeCall(id);
  };

  return (
    <Stack
      sx={{
        width: "100%",
        px: 1,
        borderRight:
          activeCall === index ? 0 : activeCall - 1 === index ? 0 : 1,
        borderRightColor: "divider",
      }}
      direction={"row"}
      alignItems={"center"}
      justifyContent={"space-between"}
    >
      <CallTabDetails tab={tab} />
      <Zoom in={tab.active}>
        <IconButton size="small" onClick={() => handleCloseClick(tab.id)}>
          <Close fontSize="small" />
        </IconButton>
      </Zoom>
    </Stack>
  );
};

export default CallTabLabel;
