import {Card} from "@mui/material";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import React from "react";
import Typography from "@mui/material/Typography";
import {Counter} from "./Counter";

export function CocktailItemCalc({cocktail, deleteHandler, changeHandler}) {
    return (
        <Card sx={{mb: 1, height: '250px', display: 'relative', p: 2}}>
            <Stack justifyContent={'start'} spacing={2}>
                <Stack direction='row' justifyContent='start' alignItems='center'>
                    <Box sx={{width: '100px', height: '100px'}}>
                        <img src={cocktail.image} loading='lazy' height={'100px'} width={'100px'} alt={cocktail.id}/>
                    </Box>
                    <Box sx={{width: 'calc(90% - 100px)', pr: 2, ml: 2}}>
                        <Stack>
                            <Typography>{cocktail.name}</Typography>
                            <Typography>{cocktail.volume}</Typography>
                            <Typography>{cocktail.category}</Typography>
                            <Typography>{cocktail.alcoholic}</Typography>
                            <Typography color={'textSecondary'}>{cocktail.components}</Typography>
                        </Stack>
                    </Box>

                    <Stack direction='row'>
                        <Stack sx={{width: '5%'}} spacing={1} justifyContent='flex-start'>
                            <IconButton size='small' onClick={() => deleteHandler(cocktail.id)}>
                                <DeleteIcon/>
                            </IconButton>
                        </Stack>
                    </Stack>
                </Stack>
                <Counter id={cocktail.id} changeHandler={changeHandler}/>
            </Stack>
        </Card>
    )
}