import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import { CardActionArea } from "@mui/material";
import { PRODUCT_IMAGE_DIR } from "../const";

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

    return (
        <Card sx={{ width: "100%" }}>
            <CardActionArea
                onClick={() => {
                    onClick(product.id);
                }}
            >
                <CardMedia component="img" height="200" image={productImg} alt={product.name} />
                <CardContent>
                    <Typography gutterBottom variant="h5" component="div" sx={{ marginBottom: 0 }}>
                        {product.name}
                    </Typography>
                </CardContent>
            </CardActionArea>
        </Card>
    );
}

export { ProductCard };