import {useTranslations} from "next-intl";
import {Box, List, ListItem, Typography} from "@mui/material";

const Topics = ({historyItem}) => {
    const t = useTranslations();
    return (
        <Box timeout="auto" unmountonexit="true">
            <List component="div" disablePadding>
                <ListItem sx={{px: 4}}>
                    <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
                        <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
                            {t("CallHistory.category_name")}:
                        </Typography>
                        <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
                            {historyItem.category_name}
                        </Typography>
                    </Box>
                </ListItem>
            </List>
            <List component="div" disablePadding>
                <ListItem sx={{px: 4}}>
                    <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
                        <Typography variant="subtitle2" sx={{color: "#837e7e"}}>
                            {t("CallHistory.subcategory_name")}:
                        </Typography>
                        <Typography variant="subtitle2" sx={{
                            width: "200px",
                            textOverflow: 'ellipsis',
                            overflow: 'hidden',
                            whiteSpace: "nowrap",
                            textAlign: "end",
                            color: "#837e7e"
                        }}>
                            {historyItem.subcategory_name}
                        </Typography>
                    </Box>
                </ListItem>
            </List>
        </Box>
    )
}

export default Topics
