import {Card} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from '@mui/icons-material/Delete';
import AddBoxRoundedIcon from '@mui/icons-material/AddBoxRounded';
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
import React from "react";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import {paths} from "../../path";
import EditIcon from '@mui/icons-material/Edit';

export function IngredientCard({row, value, infoHandler, changeHandler}) {
    return (
        <Card sx={{mb: 1, height: '130px', display: 'relative', pt: 1}}>
            <Stack direction='row' justifyContent='start' alignItems='center'>
                <Box sx={{width: '100px', height: '100px'}}>
                    <img src={row.image} loading='eager' height={'100px'} width={'100px'} alt={row.id}/>
                </Box>
                <Box sx={{width: 'calc(90% - 100px)', pr: 2}}>{row.name}</Box>
                <Stack direction='row'>
                    <Box mr={1} pt={'3px'}>{!row.alcohol ? "" : `${row.abv}%`}</Box>
                    <Stack sx={{width: '5%'}} spacing={1} justifyContent='flex-start'>
                        <IconButton size='small' onClick={() => changeHandler(row, value)}>
                            {value ? <AddBoxRoundedIcon/> : <DeleteIcon/>}
                        </IconButton>
                        <IconButton size='small' onClick={() => infoHandler(row)}>
                            <InfoRoundedIcon/>
                        </IconButton>
                        <IconButton size='small' href={`${paths.bar.ingredientEdit}?id=${row.id}`}>
                            <EditIcon/>
                        </IconButton>
                    </Stack>
                </Stack>
            </Stack>
        </Card>
    )
}