import React from "react";
import Pictograms from "./Pictograms";
import { useHistory } from "react-router-dom";
import { getTodayHours } from "../../Services.js";

function extractTags(tags) {
  var results = [];
  if (!tags) return results;
  for (let [key, value] of Object.entries(tags)) {
    if (value === true) {
      results.push(key);
    }
  }
  return results;
}

export default function CardRestaurant(props) {
  const history = useHistory();
  const img = props.imgUrl;

  return (
    <div
      onClick={() => history.push(`/restaurant/${props.id}`)}
      className="card-restaurant"
    >
      <div
        className="card-img"
        style={{ backgroundImage: "url(" + img + ")" }}
      ></div>
      <div className="card-info">
        <div className="title-info">
          <h1>{props.name}</h1>
          <hr />
          <h3>Miasto: {props.city}</h3>
          <h3>Dziś otwarte: {getTodayHours(props.hours)}</h3>
        </div>
        <div className="card-description">
          <p>{props.description}</p>
        </div>
        <div className="card-pictograms">
          <Pictograms pictograms={extractTags(props.tags)} />
        </div>
      </div>
    </div>
  );
}