import React from "react";
import Pictograms from "./Pictograms";
import { extractTags } from "../../Services";
import { useHistory } from "react-router-dom";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";

export default function CardDish(props) {
  const history = useHistory();
  const {
    name,
    price,
    imgUrl,
    weight,
    vegan,
    vegetarian,
    allergens,
    _id,
  } = props.dish;

  return (
    <div
      className="carddish-container"
      onClick={() => history.push(`/dish/${_id}`)}
    >
      <div className="carddish-left">
        <div
          className="carddish-img"
          style={{ backgroundImage: "url(" + imgUrl + ")" }}
        />
        <div className="carddish-left-info">
          <div className="carddish-left-upper">
            <h2>{name}</h2>
            <p>Porcja: {weight}</p>
            <p>
              {vegan && "Danie wegańskie | "}
              {vegetarian && "Danie wegetariańskie"}
            </p>
          </div>
          <Pictograms pictograms={extractTags(allergens)} />
        </div>
      </div>
      <div className="carddish-right">
        <h5>{!props.hidePrice && `${price} zł`}</h5>
        <KeyboardArrowRightIcon color="primary" />
      </div>
    </div>
  );
}