import React from 'react';
import ReactDOM from "react-dom";
import styled from 'styled-components';

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

function MenuButton(props) {
    const { item } = props
    return (
        <MenuItem title={item.title}>
          {item.title}
        </MenuItem>
    )
}

const MenuItem = styled.div`
  color: black;
  display: grid;
  grid-template-columns: 24px auto;
  align-items: center;
  padding: 10px;
  transition: 0.5s ease-out;
  border-radius: 10px;

  :hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),
      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.2);
  }
`
const array = [{ title: "Emil"}, { title: "Mihai"}, { title: "Paul"}]
const value = JSON.parse(document.getElementById('count').textContent);
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <MenuButton item={ { title: "Emil"} } />;
const element2 = array.map( (title) => <MenuButton item={title} />)
root.render(element2);
alert(value);