import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

const user = [{
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
},
{
  name: 'Hedys sister',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
},
];

 function myApp({count, handleClick}) {

  return
      (
      <div className="avatar"> hello
      <MyButton onClick={handleClick} count={count} />
      <MyButton onClick={handleClick} count={count} />
      </div>
      );
  }
 function MyButton({count, onClick}) {
    <button onClick={onClick}>
     clicked {count} times
    </button>
 }

 function Profile() {

    return (
      user.map( user =>
      <>
        <h1>{user.name}</h1>
        <img
          className="avatar"
          src={user.imageUrl}
          alt={'Photo of ' + user.name}
          style={{
            width: user.imageSize,
            height: user.imageSize
          }}
        />
      </> )
    );
  }
  function App() {
    const [count, setCount] = useState(0)
    function handleClick(){
      setCount(count + 1)
    }
    return (
      <>
        <Profile />
        <myApp count={count} onClick={handleClick} />
      </>

    );
  }
  export default App;