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 }) {
    const productImg = `${PRODUCT_IMAGE_DIR}/${product.image}`;

    return (
        <Card>
            <CardActionArea>
                <CardMedia component="img" height="140" image={productImg} alt={product.name} />
                <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                        {product.name}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        {product.description}
                    </Typography>
                </CardContent>
            </CardActionArea>
        </Card>
    );
}

export { ProductCard };
