import React from 'react'
import './navbar.css'
import { IoSearch } from "react-icons/io5";
import { CgProfile } from "react-icons/cg";
import { useStateProvider } from '../../util/StateProvider';

const Navbar = () => {

  const [{userInfo}] = useStateProvider();
  
  return (
    <div className='Navbar'>
      <div className="nav-search">
        <div className="navbar-search">
          <IoSearch/>
          <input type="text" placeholder='What do you want to play?' />
        </div>
      </div>
      <div className="userProfile">
        <a href="/">
          <CgProfile/>
          <span>{userInfo?.userName}</span>
        </a>
      </div>
    </div>
  )
}


export default Navbar