import { useCall } from "@/lib/contexts/call";
import { Box, Tab, Tabs } from "@mui/material";
import CallTabLabel from "./CallTabLabel";

const CallTabsList = () => {
  const { calls, changeActiveTabCall, activeCall } = useCall();
  const handleChange = (event, newValue) => {
    changeActiveTabCall(newValue);
  };

  return (
    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
      <Tabs
        value={activeCall}
        onChange={handleChange}
        variant="scrollable"
        scrollButtons="auto"
        sx={{ background: "#e0e0e0" }}
      >
        {calls.map((call, index) => (
          <Tab
            component={"div"}
            sx={{
              width: 350,
              p: 0,
              py: 0.5,
              background: call.active ? "#fff" : null,
              borderTopRightRadius: call.active ? "16px" : 0,
              borderTopLeftRadius: call.active ? "16px" : 0,
            }}
            label={<CallTabLabel index={index} tab={call} />}
            key={call.id}
          />
        ))}
      </Tabs>
    </Box>
  );
};

export default CallTabsList;
