import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";

export function CocktailDescription({row}) {
    return (
        <List sx={{py: '0px'}}>
            {row.hasError && (
                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                    <ListItemText color={'red'}>Имеет ошибку в рецепте или ингредиентах</ListItemText>
                </ListItem>
            )}
            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                <ListItemText>{"Категория: " + row.category}</ListItemText>
            </ListItem>
            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                <ListItemText>{"Алкоголь: " + row.alcoholic}</ListItemText>
            </ListItem>
            {row.volume !== null && (
                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                    <ListItemText>{"Крепость: ≈" + row.volume}</ListItemText>
                </ListItem>
            )}
            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                <ListItemText>{"Подача: " + row.glass}</ListItemText>
            </ListItem>
            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                <ListItemText>{"Состав: " + row.components}</ListItemText>
            </ListItem>
            {(row.tags && row.tags.length > 0) && (
                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
                    <ListItemText>{"Теги: " + row.tags.replaceAll(',', ', ')}</ListItemText>
                </ListItem>)}
        </List>
    )
}