import Nav from '../nav/nav';
import './header.css'

let Logo = () => <a href="#"><img src='logo.png' alt="Food"/></a>;


let h2Text = 'Find your Favorite',
    h1Text = 'RECIPES',
    h4Text = 'OR SEND US YOUR OWN RECIPES AND GET REWARDED!';

function Btn() {

    const text = 'Log in';
    const logged = true; //conditions

    return <div class="btn btn_header">
                <a href="#"> {logged?'GET STARTED': text}</a>
            </div>
}

const Header = () => {
    return <header class="header">
              <div class="container">
                  <div class="header__top">
                      <Logo/>
                      <Nav/>
                  </div>
                  <div class="header__content">
                      <h2>{h2Text}</h2>
                      <h1>{h1Text}</h1>
                      <Btn/>
                      <h4>{h4Text}</h4>
                  </div>
              </div>
          </header>
}

export default Header;