import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import * as React from "react";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

export function IngredientInfoModal({ingredient, open, closeHandler}) {
    if (!ingredient) {
        return null;
    }
    return (
        <Dialog fullWidth={true} maxWidth="350px" open={open} onClose={closeHandler}
                sx={{
                    '& .MuiDialog-paper': {
                        margin: '8px',
                    },
                    '& .MuiPaper-root': {
                        width: 'calc(100% - 16px)',
                    }
                }}>
            <DialogTitle>{ingredient.name}</DialogTitle>
            <DialogContent>
                <Stack spacing={2} sx={{justifyContent: "center"}}>
                    <img src={ingredient.image} alt={ingredient.name} loading={"eager"} width={"300"}/>
                    {ingredient.alcohol && (<Typography>{`Крепость ${ingredient.abv}`}</Typography>)}
                    <Typography>{ingredient.description}</Typography>
                </Stack>
            </DialogContent>
            <DialogActions>
                <Button onClick={closeHandler}>Close</Button>
            </DialogActions>
        </Dialog>
    );
}