import {Box, Tab, Tabs} from "@mui/material";
import CallTabLabel
    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";

const CallTabsList = () => {
    const {answersList, changeActiveTabAnswers, activeTab} = useAnswers()
    const handleChange = (event, newValue) => {
        changeActiveTabAnswers(newValue)
    };

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

export default CallTabsList
