import image from '../images/card.png';
import logo from '../images/musicico.png';
import logoutimg from '../images/logout.png';
import {connect}   from 'react-redux';
import { actionAuthLogout } from '../store/authReducer';


export const Header = ({children}) => 
<header id="header">
  <nav className="navbar navbar-expand-lg navbar-dark bg-dark border-bottom">
    <div className="container flex justify-content-between ">
    
        <div className='d-flex align-items-center justify-content-center' >
        <a href="/allplaylists" className="navbar-brand" ><img className='logo' src={logo} alt='logo'/>Music</a>
        </div>

        <div className="d-flex">

            <div className="d-flex align-items-center" id="navbarSupportedContent">
                <a href="/allplaylists" className="navbar-brand nav-link active" aria-current="page" >To all playlists</a>
            </div>
            <div className="d-flex align-items-center" id="navbarSupportedContent">
                <a href="/user" className="navbar-brand nav-link active" aria-current="page" >Home</a>
            </div>
            <input className="form-control me-2 " type="search" placeholder="Search" aria-label="Search"/>
        
        </div>
        <div className="d-flex">
            <img alt='///' className='logoimg' src={image}/>
            <CLogout/>
        </div>
    </div>
  </nav>
  {children}
</header>

const CLogout = connect(state => ({children: `Logout (${state.auth.user?.login || 'anon'})`}), 
                                              {onClick: actionAuthLogout})('button')