text: import React from "react"
  import { Link } from "gatsby"
  
  import { makeStyles } from "@material-ui/core/styles"
  import Card from "@material-ui/core/Card"
  import CardMedia from "@material-ui/core/CardMedia"
  import CardContent from "@material-ui/core/CardContent"
  import CardActions from "@material-ui/core/CardActions"
  import IconButton from "@material-ui/core/IconButton"
  import Typography from "@material-ui/core/Typography"
  import { red } from "@material-ui/core/colors"
  import FavoriteIcon from "@material-ui/icons/Favorite"
  import ShareIcon from "@material-ui/icons/Share"
  
  const useStyles = makeStyles(theme => ({
    root: {
      maxWidth: 345,
    },
    media: {
      height: 0,
      paddingTop: "56.25%", // 16:9
    },
    expand: {
      transform: "rotate(0deg)",
      marginLeft: "auto",
      transition: theme.transitions.create("transform", {
        duration: theme.transitions.duration.shortest,
      }),
    },
    expandOpen: {
      transform: "rotate(180deg)",
    },
    avatar: {
      backgroundColor: red[500],
    },
  }))
  
  const ItemCard = ({ image, price, title, url }) => {
    const classes = useStyles()
  
    return (
      <Link to={url.replace("product/", "")} style={{ textDecoration: "none" }}>
        <Card className={classes.root}>
          <CardMedia
            className={classes.media}
            image={image}
            title="Paella dish"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {title}{" "}
            </Typography>
            <Typography variant="h5" color="textSecondary" component="p">
              {price.value.integer}$
            </Typography>
          </CardContent>
          <CardActions disableSpacing>
            <IconButton aria-label="add to favorites">
              <FavoriteIcon />
            </IconButton>
            <IconButton aria-label="share">
              <ShareIcon />
            </IconButton>
          </CardActions>
        </Card>
      </Link>
    )
  }
  
  export default ItemCard
  