import React from 'react'
import { Nav } from 'react-bootstrap';
import { handleLogout } from '../utils/auth';
import { BsPeopleCircle } from "react-icons/bs";
import { AiOutlineLogout } from "react-icons/ai";
import "../menu.css";

function Menu(props) {

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

  return (
    <div className="container-fluid" style={{ display: "flex", flexDirection: "row", backgroundColor: "#61477a", heigth: "100%", position: "relative" }}>
      <p className="navbar-brand" href="/home" style={{color: 'white', alignItems: "center"}}>YDK Messenger</p>
      {name ?
        <>
          <div className="nav navbar-nav mr-auto" style={{ color: 'white', display: "flex", flexDirection: "row", alignItems: "center"}}>
            <p className="mt-2 mr-4">{name}님 환영합니다</p>
            <div className="showText">
              <a href="/profile" style={{color:"#FFFFFF", marginRight: "15px"}}>{'Profile'}</a>
              <a onClick={() => handleLogout()} href="/login" style={{color:"#FFFFFF"}}>{'logout'}</a>
            </div>
            <div className="showIcon">
              <a href="/profile" style={{marginRight: "15px"}}><BsPeopleCircle size="25" color="#FFFFFF" /></a>
              <a href="/login" onClick={() => handleLogout()}><AiOutlineLogout size="25" color="#FFFFFF" /></a>
            </div>
          </div>
        </>
        : <>
          <Nav className="nav navbar-nav">
            <Nav.Link href="/login">Login</Nav.Link>
            <Nav.Link href="/signup">Signup</Nav.Link>
          </Nav>
        </>}
    </div>
  )
}

export default Menu