// import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";

import NewExpense from "./components/NewExpense";
import Expenses from "./components/Expenses";

const INITIAL_EXPENSES = [
  {
    id: "e1",
    title: "Klopapier",
    amount: 94.12,
    date: new Date(2020, 7, 14),
  },
  { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
  {
    id: "e3",
    title: "Autoversicherung ",
    amount: 294.67,
    date: new Date(2021, 2, 28),
  },
  {
    id: "e4",
    title: "Neuer Schreibtisch (Holz)",
    amount: 450,
    date: new Date(2021, 5, 12),
  },
];

function App() {
  const [expenses, setExpenses] = useState(INITIAL_EXPENSES);

  const addExpenseHandler = (expense) => {
    // console.log("App.js");
    // console.log(expense);

    setExpenses((prevExpenses) => {
      return [expense, ...prevExpenses];
    });
  };

  return (
    <div>
      <NewExpense onAddExpense={addExpenseHandler} />
      <Expenses items={expenses} />
    </div>
  );
  // return React.createElement( // das gleiche wie da oben
  //   "div",
  //   {},
  //   React.createElement("h2", {}),
  //   React.createElement(Expenses, { items: expenses })
  // );
}

export default App;
