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

const Logo = () => {
    return <>
        <span style={{color: Math.random() > 0.5 ? 'red' : 'green'}}>TEXT</span>
        <img src={logo} alt="logo" className="App-logo"/>
    </>
}

const NavItem = ({text, url}) =>
    <li><a href={url}>{text.toUpperCase() + Math.random()}</a></li>

const Nav = () =>
<ul>   
    <NavItem url="/" text="Главная"/>
    <NavItem url="/aboutus" text="О нас" />
    <NavItem url="/contacts" text="Контакты" />
</ul>

const GoodCard = ({title='NoName', 
                    url='#', 
                    img='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
                    children}) => //title, url - объявление переменных. После `=` - значение по умолчанию
<div className='GoodCard'>
    <h2>{title}</h2> 
    <a href={url}>
        <img src={img} />
    </a> 
    <p>
        {children}
    </p>
</div>

const Header = () =>
<header className="App-header">
    <Logo /> 
    <Nav></Nav>
</header>

const Content = () =>
<>
    <GoodCard title='Пиво' 
              url="https://ru.wikipedia.org/wiki/%D0%9F%D0%B8%D0%B2%D0%BE" 
              img="https://m.dom-eda.com/uploads/images/catalog/item/cbb4387631/07042d6ed6_1000.jpg">
        пей пиво <strong>пенное</strong> и все такое
    </GoodCard>

    <GoodCard title="ЕстьName" children="задаю children как атрибут"/>
    <GoodCard title="ЕстьName">
        задаю children как атрибут
    </GoodCard>
</>

const Counter = () => {
    const [counter, setCounter] = useState(1)
    console.log('ПЕРЕЗАПУСК КОМПОНЕНТА', counter)
    return (
        <button style={{fontSize: `${counter/10}em`}}
            onClick={() => setCounter(counter +1)}>{counter}</button>
    )
}

const Input = () => {
    const [text, setText] = useState('')
    console.log('ИНПУТ ПЕРЕЗАПУСТИЛСЯ', text)
    return (
        <div>
            <input value={text} 
                       onChange={e => setText(e.target.value)}
                       type="text"/>
            <ShowFun text={text} onReset={() => setText('')}/>
        </div>
   )
}

const ShowFun = ({text, onReset}) =>
    <div style={{color: text.length > 10 ? 'red': 'green'}}
        onClick={onReset}>
        {text}
    </div>

const LoginForm = ({onLogin}) => {
    //придумать пару стейтов для двух инпутов
    //сделать так, что бы кнопка была disabled когда login или пароль
    //слишком короткие
    //запустить onLogin по клику
    return (
        <div>
            <input placeholder='Login'/>
            <input placeholder='Password'/>
            <button>Login...</button>
        </div>
    )
}

function App() {
  return (
    <div className="App">
        <LoginForm onLogin={({login, password}) => console.log('ЛОГИН И ПАРОЛЬ', login, password)}/>
        <Input/>
        <Input/>
        <Counter />
        <Counter />
    </div>
  );
}

export default App;