import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavLink from 'react-bootstrap/NavLink';
import NavItem from 'react-bootstrap/NavItem';
import NavDropdown from 'react-bootstrap/NavDropdown';

const NavBar = (props, sections) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(prevState => !prevState);

  return (
      <Navbar expand="lg" collapseOnSelect bg="dark" variant="dark">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse>
        <Nav>
          <NavLink href="/">Home</NavLink>
        </Nav>
        <NavDropdown title="Podcasts">
            <NavDropdown.Item key="current" href="/podcasts/current">Current Podcasts</NavDropdown.Item>
            <NavDropdown.Item key="archived" href="/podcasts/archived">Archived Podcasts</NavDropdown.Item>
        </NavDropdown>
        <NavItem>
          <NavLink href="/news">News and such</NavLink>
        </NavItem>
        {props.sections.sections.map((section) => (                    
          <NavDropdown title={section.title}>
              {section.pages.map((page) => (
                <NavDropdown.Item key={page.page_slug} href={"/sections/" + page.page_slug}>{page.page_title}</NavDropdown.Item>
              ))}       
          </NavDropdown>
        ))}
        </Navbar.Collapse>
      </Navbar>
  );
}

export default NavBar