import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { Menu } from "./Menu";

const data = [
  {
    name: "Pieczony łosoś",
    ingredients: [
      {
        name: "łosoś",
        amount: 1,
        measurement: "kg"
      },
      {
        name: "orzeszki piniowe",
        amount: 1,
        measurement: "cup"
      },
      {
        name: "sałata",
        amount: 2,
        measurement: "cups"
      },
      {
        name: "żółta dynia",
        amount: 1,
        measurement: "med"
      },
      {
        name: "oliwa",
        amount: 0.5,
        measurement: "cup"
      },
      {
        name: "czosnek",
        amount: 3,
        measurement: "ząbki"
      }
    ],
    steps: [
      "Rozgrzej piekarnik do 190 stopni.",
      "Posmaruj oliwą szklane naczynie żaroodporne.",
      "Add the yellow squash and place in the oven for 30 mins.",
      "Do naczynia włóż łososia, czosnek i orzeszki piniowe.",
      "Piecz przez 15 minut.",
      "Remove from oven. Add the lettuce and serve."
    ]
  },
  {
    name: "Taco rybne",
    ingredients: [
      {
        name: "ryba morska o białym mięsie",
        amount: 1,
        measurement: "kg"
      },
      {
        name: "ser",
        amount: 1,
        measurement: "cup"
      },
      {
        name: "sałata lodowa",
        amount: 2,
        measurement: "cups"
      },
      {
        name: "pomidory",
        amount: 2,
        measurement: "large"
      },
      {
        name: "tortilla",
        amount: 3,
        measurement: "med"
      }
    ],
    steps: [
      "Grilluj rybę, aż będzie gotowa do spożycia.",
      "Umieść rybę na trzech tortillach.",
      "Udekoruj je sałatą, pomidorami i serem."
    ]
  }
];

ReactDOM.hydrate(
  <Menu
    recipes={data}
    title="Przepisy na smaczne potrawy"
  />,
  document.getElementById("root")
);
