import React from 'react'
import { Navbar, Nav, Button, Row, Col } from 'react-bootstrap';
import { handleLogout } from '../utils/auth';


function Menu() {

  const name = sessionStorage.getItem('name');

  return (

    // <Navbar bg="dark" variant="dark" expand="lg">
    //   <Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
    //   <Navbar.Toggle aria-controls="basic-navbar-nav" />
    //   <Navbar.Collapse id="basic-navbar-nav">
    //     {name ?
    //       <>
    //         <Nav.Item className="mt-2" style={{ color: 'white' }}>{name}님 환영합니다</Nav.Item>
    //         <Nav.Item className="ml-auto">
    //           <Nav.Link href="/profile" style={{ color: 'white' }}>Profile</Nav.Link>
    //         </Nav.Item>
    //         <Nav.Item>
    //           <Nav.Link onClick={() => handleLogout()} href="login" style={{ color: 'white' }}>Logout</Nav.Link>
    //         </Nav.Item>
    //       </>
    //       : <>
    //         <Nav.Item className="ml-auto">
    //           <Nav.Link href='/login' style={{ color: 'white' }}>로그인</Nav.Link>
    //         </Nav.Item>
    //         <Nav.Item>
    //           <Nav.Link href='/signup' style={{ color: 'white' }}>회원가입</Nav.Link>
    //         </Nav.Item>
    //       </>}
    //   </Navbar.Collapse>
    // </Navbar>
    // style={{ borderColor: "#BDBDBD" }}
    
    <Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
      <div className="container-fluid">
        <Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
        {name ?
          <>
            <Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
              <Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
              <Nav.Link href="/profile">Profile</Nav.Link>
              <Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
            </Nav>
          </>
          : <>
            <Nav className="nav navbar-nav">
              <Nav.Link href="/login">Login</Nav.Link>
              <Nav.Link href="/signup">Signup</Nav.Link>
            </Nav>
          </>}
      </div>
    </Navbar>
  )
}


export default Menu