import styled from '@emotion/styled';

export const NavBar = styled.div`
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;

  a.current {
    padding: 5px;
    border: none;
    color: #0070f3;
    text-decoration: none;
    border-bottom: 3px solid #0070f3;
  }

  a:not(.current) {
    padding: 5px;
    border: none;
    cursor: pointer;
    color: #0070f3;
    text-decoration: none;

    &:hover {
      color: #0050b3;
      border-bottom: 2px solid #0050b3;
    }
  }
`;

export enum NavbarPage {
  UserData,
  PlanOverrides,
  ShortUrls,
  ZohoSync,
  Dashboards,
  Standup,
}

export type NavigationBarProps = {
  currentPage: NavbarPage;
};

export const NavigationBar = (props: NavigationBarProps) => {
  const { currentPage } = props;
  return (
    <NavBar>
      {currentPage === NavbarPage.UserData ? <a className="current">User Data</a> : <a href="/admin/">User Data</a>}
      {currentPage === NavbarPage.PlanOverrides ? (
        <a className="current">Plan Overrides</a>
      ) : (
        <a href="/admin/planOverrides">Plan Overrides</a>
      )}
      {currentPage === NavbarPage.ShortUrls ? (
        <a className="current">Short URLs</a>
      ) : (
        <a href="/admin/shortUrls">Short URLs</a>
      )}
      {currentPage === NavbarPage.ZohoSync ? (
        <a className="current">Zoho Sync</a>
      ) : (
        <a href="/admin/zohoSync">Zoho Sync</a>
      )}
      {currentPage === NavbarPage.Dashboards ? (
        <a className="current">Dashboards</a>
      ) : (
        <a href="/admin/dashboards">Dashboards</a>
      )}
      {currentPage === NavbarPage.Standup ? <a className="current">Standup</a> : <a href="/admin/standup">Standup</a>}
    </NavBar>
  );
};