import {IconButton, Stack, Zoom} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import CallTabDetails
    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";

const CallTabLabel = ({tab, index}) => {
    const {closeAnswerTab, activeTab} = useAnswers()
    const handleCloseClick = (id) => {
        closeAnswerTab(id)
    };

    return (
        <Stack sx = {{
            width: '100%',
            px: 1,
            borderRight: activeTab === index ? 0 : activeTab - 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)}>
                    <CloseIcon fontSize = "small"/>
                </IconButton>
            </Zoom>
        </Stack>
    )
}

export default CallTabLabel
