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

const LoadingHistory = () => {
    const t = useTranslations();
    return (
        <>
            <List data-testid="loading-list" sx={{
                width: '100%',
                bgcolor: 'rgba(222,234,215,0.11)',
            }}>
                <Box sx={{
                    display: "flex",
                    alignItems: "center",
                    px: 2
                }}>
                    <ListItemAvatar data-testid="loading-listItemAvatar">
                        <Skeleton data-testid="operator-avatar-skeleton"
                                  animation="wave" variant="circular"
                                  width={60} height={60}/>
                    </ListItemAvatar>
                    <ListItemText data-testid="loading-listItemText" primary={
                        <Box sx={{display: "flex", alignItems: "end"}}>
                            <Skeleton
                                data-testid="operator-name-skeleton"
                                animation="wave"
                                height={15}
                                width="50%"
                                style={{marginRight: 10, marginBottom: 5}}
                            />
                        </Box>
                    } secondary={
                        <Skeleton
                            data-testid="operator-answer-date-skeleton"
                            animation="wave"
                            height={10}
                            width="30%"
                            style={{marginRight: 10}}
                        />
                    }/>
                </Box>
                <Box timeout="auto" sx={{py: 2}}>
                    <List component="div" disablePadding>
                        <ListItem data-testid="loading-listItem-cat" sx={{px: 4}}>
                            <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
                                <Skeleton
                                    data-testid="operator-category-header-skeleton"
                                    animation="wave"
                                    height={15}
                                    width="15%"
                                />
                                <Skeleton
                                    data-testid="operator-category-value-skeleton"
                                    animation="wave"
                                    height={15}
                                    width="30%"
                                />
                            </Box>
                        </ListItem>
                    </List>
                    <List component="div" disablePadding>
                        <ListItem data-testid="loading-listItem-subCat" sx={{px: 4}}>
                            <Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
                                <Skeleton
                                    data-testid="operator-subCategory-header-skeleton"
                                    animation="wave"
                                    height={15}
                                    width="25%"
                                />
                                <Skeleton
                                    data-testid="operator-subCategory-value-skeleton"
                                    animation="wave"
                                    height={15}
                                    width="50%"
                                />
                            </Box>
                        </ListItem>
                    </List>
                </Box>
            </List>
        </>

    )
}

export default LoadingHistory
