//import React, { Component } from "react";
 import Display from './Display';
import Button from './Button';

import { useState } from "react";

function  euroToDollar (num) {
  return (num * 1.0902).toFixed(2);
}

function euroToPfund (num)  {
  return (num * 0.8782).toFixed(2);
}

function App () {
 
  
 const [money, setMoney]= useState(0);
 const [convertedMoney, setConvertedMoney]= useState(0);


    return (
      <div>
        {[10, 20, 50, 100, 200, 500].map(m => 
          <Button key={m} myText={m+""} callBack={() => {
          setMoney(m);
          setConvertedMoney(m + " Euro");
          }} />
        )}

       <Display value = {convertedMoney}/> 

        <Button myText={"Dollar"} callBack={()=>{

          setConvertedMoney(euroToDollar(money) + " $")
        //  let schritt1 = money;
        //  let schritt2 = euroToDollar(schritt1);
         // let schritt3 = schritt2 + " $";
        //  setConvertedMoney(schritt3);

         // euroToDollar(setConvertedMoney);
        }} />
        <Button myText={"Pfund"} callBack={()=>{
            setConvertedMoney(euroToPfund(money) + " Pf")
        }} />
        <Button myText={"Euro"} callBack={() => {
          // null
          setConvertedMoney((money) + " Euro")
        }} />
      </div>
    );
  }


export default App;