import {useTranslations} from "next-intl";
import {Avatar, Box, ListItem, ListItemAvatar, ListItemText, Typography} from "@mui/material";
import HeadsetMicIcon from '@mui/icons-material/HeadsetMic';

const PreviousOperatorData = ({historyItem}) => {
    const t = useTranslations();
    return (
        <ListItem>
            <ListItemAvatar>
                <Avatar sx={{backgroundColor: "primary.light"}}>
                    <HeadsetMicIcon/>
                </Avatar>
            </ListItemAvatar>
            <ListItemText primary={
                <Box sx={{display: "flex", alignItems: "end"}}>
                    <Typography sx={{marginRight: 1, color: "#545151"}}>
                        {historyItem.operator_name}
                    </Typography>
                    <Typography variant="caption" sx={{color: "secondary.main"}}>
                        ({t("CallHistory.operator")})
                    </Typography>
                </Box>
            } secondary={historyItem.answer_date}/>
        </ListItem>
    )
}

export default PreviousOperatorData
