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;