text: import React from "react";
  import Color from "color";
  // import GoogleFont from "react-google-font-loader";
  import { makeStyles } from "@material-ui/core/styles";
  // import { NoSsr } from "@material-ui/core";
  import Grid from "@material-ui/core/Grid";
  import Typography from "@material-ui/core/Typography";
  import CardActionArea from "@material-ui/core/CardActionArea";
  import Card from "@material-ui/core/Card";
  import CardContent from "@material-ui/core/CardContent";
  import CardMedia from "@material-ui/core/CardMedia";
  import { useFourThreeCardMediaStyles } from "@mui-treasury/styles/cardMedia/fourThree";
  
  const useGridStyles = makeStyles(({ breakpoints }) => ({
    root: {
      [breakpoints.up("md")]: {
        justifyContent: "center",
      },
    },
  }));
  
  const useStyles = makeStyles((theme) => ({
    root: {
      margin: theme.spacing(3),
    },
    actionArea: {
      borderRadius: 16,
      transition: "0.2s",
      "&:hover": {
        transform: "scale(1.1)",
      },
    },
    card: ({ color }) => ({
      minWidth: 256,
      borderRadius: 16,
      boxShadow: "none",
      "&:hover": {
        boxShadow: `0 6px 12px 0 ${Color(color)
          .rotate(-12)
          .darken(0.2)
          .fade(0.5)}`,
      },
      height: "100%",
    }),
    content: ({ color }) => {
      return {
        backgroundColor: color,
        padding: "1rem 1.5rem 1.5rem",
      };
    },
    title: {
      fontFamily: "Keania One",
      fontSize: "2rem",
      color: "#fff",
      textTransform: "uppercase",
    },
    subtitle: {
      fontFamily: "Montserrat",
      color: "#fff",
      opacity: 0.87,
      marginTop: "2rem",
      fontWeight: 500,
      fontSize: 14,
    },
  }));
  
  const CustomCard = ({ classes, image, title, subtitle, href }) => {
    const mediaStyles = useFourThreeCardMediaStyles();
    return (
      <CardActionArea className={classes.actionArea} href={href}>
        <Card className={classes.card}>
          <CardMedia classes={mediaStyles} image={image} />
          <CardContent className={classes.content}>
            <Typography className={classes.title} variant={"h2"}>
              {title}
            </Typography>
            <Typography className={classes.subtitle}>{subtitle}</Typography>
          </CardContent>
        </Card>
      </CardActionArea>
    );
  };
  
  export const DashCard = React.memo(function SolidGameCard() {
    const gridStyles = useGridStyles();
    const styles = useStyles({ color: "#203f52" });
    const styles2 = useStyles({ color: "#4d137f" });
    const styles3 = useStyles({ color: "#ff9900" });
    // const styles4 = useStyles({ color: "#34241e" });
    return (
      <>
        <Grid classes={gridStyles} container spacing={4}>
          <Grid item>
            <CustomCard
              classes={styles}
              title={"Build your list"}
              subtitle={"No more waste!"}
              image={
                "https://live.staticflickr.com/8789/28123133694_5e8f2c3b07_b.jpg"
              }
              href={"/foodpal_list"}
            />
          </Grid>
          <Grid item>
            <CustomCard
              classes={styles2}
              title={"Suggest new foods"}
              subtitle={"Help us track more!"}
              image={
                "https://live.staticflickr.com/1052/872371771_a1bfa803a2_b.jpg"
              }
              href="/add_food"
            />
          </Grid>
          <Grid item>
            <CustomCard
              classes={styles3}
              title={"Account Management"}
              subtitle={"Edit your details"}
              image={
                "https://live.staticflickr.com/7175/6555466127_6300bb6f17_b.jpg"
              }
              href="/"
            />
          </Grid>
        </Grid>
      </>
    );
  });
  export default DashCard;
  