import * as React from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import CardMedia from "@mui/material/CardMedia";
import { PRODUCT_IMAGE_DIR } from "../const";

function ProductModal({ product, onClose }) {
    const productImg = `${PRODUCT_IMAGE_DIR}/${product.image}`;

    return (
        <Dialog open={true} onClose={onClose}>
            <DialogTitle>{product.name}</DialogTitle>
            <DialogContent>
                <CardMedia
                    component="img"
                    height="300"
                    image={productImg}
                    alt={product.name}
                    sx={{ marginBottom: "1rem" }}
                />
                <DialogContentText>{product.description}</DialogContentText>
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose} variant="contained" autoFocus>
                    Close
                </Button>
            </DialogActions>
        </Dialog>
    );
}

export { ProductModal };
