import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";
import { renderNavigationItems } from "./Navigation";

const Nav = styled.nav`
  padding: 1rem 1rem;
  padding-bottom: 20rem;
  a {
    fill: ${colors.lightBlue};
    color: ${colors.lightBlue};
    text-decoration: none;
  }
`;

interface NavigationMobileProps {
  mobileMenuOpen?: boolean;
}

const NavigationMobile: React.FC<NavigationMobileProps> = ({ mobileMenuOpen }) => (
  <Nav hidden={!mobileMenuOpen}>
    {renderNavigationItems(true)}
  </Nav>
);

export default NavigationMobile;