import React from "react";
// ICONS
import alcohol from "../../public/i_alcohol.svg";
import card from "../../public/i_card.svg";
import delivery from "../../public/i_delivery.svg";
import eggs from "../../public/i_eggs.svg";
import gluten from "../../public/i_gluten.svg";
import glutenFree from "../../public/i_glutenFree.svg";
import lactose from "../../public/i_lactose.svg";
import lactoseFree from "../../public/i_lactoseFree.svg";
import peanuts from "../../public/i_peanuts.svg";
import pets from "../../public/i_pets.svg";
import seaFood from "../../public/i_seaFood.svg";
import sesame from "../../public/i_sesame.svg";
import soy from "../../public/i_soy.svg";
import vegan from "../../public/i_vegan.svg";
import vegetarian from "../../public/i_vegetarian.svg";

export default function (props) {
  const pictogramsSeparated = props.pictograms.map((pictogram, index) => (
    <div key={index} className="separate-pictogram">
      <h4>{getName(pictogram)}</h4>
      <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
    </div>
  ));

  return (
    <div className="pictograms-container-separated">{pictogramsSeparated}</div>
  );
}

function getImage(name) {
  switch (name) {
    case "alcohol":
      return alcohol;
    case "cardPayments":
      return card;
    case "delivery":
      return delivery;
    case "eggs":
      return eggs;
    case "gluten":
      return gluten;
    case "glutenFree":
      return glutenFree;
    case "lactose":
      return lactose;
    case "lactoseFree":
      return lactoseFree;
    case "peanuts":
      return peanuts;
    case "petFriendly":
      return pets;
    case "seaFood":
      return seaFood;
    case "sesame":
      return sesame;
    case "soy":
      return soy;
    case "vegan":
      return vegan;
    case "vegetarian":
      return vegetarian;
    default:
      return card;
  }
}

function getName(name) {
  switch (name) {
    case "alcohol":
      return "Alkohol";
    case "cardPayments":
      return "Płatność kartą";
    case "delivery":
      return "Dostawa";
    case "eggs":
      return "Jaja";
    case "gluten":
      return "Gluten";
    case "glutenFree":
      return "Bezglutenowe";
    case "lactose":
      return "Laktoza";
    case "lactoseFree":
      return "Bez laktozy";
    case "peanuts":
      return "Orzechy";
    case "petFriendly":
      return "Lubimy zwierzaki";
    case "seaFood":
      return "Owoce morza";
    case "sesame":
      return "Sezam";
    case "soy":
      return "Soja";
    case "vegan":
      return "Wegańskie";
    case "vegetarian":
      return "Wegetariańskie";
    default:
      return "Płatność kartą";
  }
}