import React from 'react';
import styled from 'styled-components';
import { withRouter } from 'react-router-dom';
import LinkIcons from '../../../components/icons/LinkIcons';

const NavActions = () => {
  const onLogout = async () => {
    sessionStorage.clear();
  };
  return (
    <ul style={{ marginTop: '1rem' }}>
      <NavItem>
        <LinkIcons title="Notifications" svg="bell" link="/notification/" />
      </NavItem>
      <NavItem>
        <LinkIcons title="Settings" svg="settings" link="/settings/" />
      </NavItem>
      <NavItem onClick={() => onLogout()}>
        <LinkIcons title="Logout" svg="log-out" link="/" />
      </NavItem>
    </ul>
  );
};

export default withRouter(NavActions);

const NavItem = styled.li`
  a {
    padding-left: 2.5rem;
    padding-right: 1.5rem;
  }
`;
