import ExpenseDate from "./ExpenseDate";
import Card from "./Card";
import "./ExpenseItem.css";
import React from "react";

function ExpenseItem(props) {
  // const day = props.date.toLocaleString("de-DE", { day: "2-digit" });
  // const month = props.date.toLocaleString("de-DE", { month: "long" });
  // const year = props.date.getFullYear();
  // const [title, setTitle] = useState(props.title);

  // const clickHandler = () => {
  //   setTitle("Updated");
  //   console.log(title);
  // };

  console.log(props);

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">{props.amount} EUR</div>
      </div>
      {/* <button onClick={clickHandler}>Change Title</button> */}
    </Card>
  );
}

export default ExpenseItem;
