import {Card} from "@mui/material";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import React from "react";

export function IngredientCalcCard({ingredient, count}) {
    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={ingredient.image} loading='lazy' height={'100px'} width={'100px'} alt={ingredient.id}/>
                </Box>
                <Box sx={{width: 'calc(90% - 100px)', pr: 2}}>{ingredient.name}</Box>
                <Stack direction='row'>
                    <Box mr={1} pt={'3px'}>{count}</Box>
                </Stack>
            </Stack>
        </Card>
    )

}