import { Container, Nav, Navbar } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';

export default function AppNavbar() {
  return (
    <Navbar bg="dark" data-bs-theme="dark" expand="sm" className="mb-3">
      <Container>
        <Navbar.Brand as={NavLink} to="/">
          swym
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="main-nav" />
        <Navbar.Collapse id="main-nav">
          <Nav>
            <Nav.Link as={NavLink} to="/subscriptions">
              Subscriptions
            </Nav.Link>
            <Nav.Link as={NavLink} to="/metrics">
              Metrics
            </Nav.Link>
            <Nav.Link as={NavLink} to="/ingestion">
              Ingestion
            </Nav.Link>
            <Nav.Link as={NavLink} to="/paper-runs">
              Paper Runs
            </Nav.Link>
            <Nav.Link as={NavLink} to="/strategies">
              Strategies
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}
