import React from "react";

import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";

import Brand from "./Brand";
import Search from "./Search";
import ConnectionIndicator from "./ConnectionIndicator";
import SettingsCog from "./SettingsCog";

import "./index.scss";

export default function() {
  return (
    <Navbar bg="dark" variant="dark" fixed="top" id="main-nav">
      <Brand />
      <Navbar.Toggle aria-controls="main-nav-collapse" />
      <Navbar.Collapse id="main-nav-collapse">
        <Nav>
          <Nav.Link href="/send"><span className="nav-icon icon-upload"></span>Send</Nav.Link>
          <Nav.Link href="/request"><span className="nav-icon icon-download"></span>Request</Nav.Link>
        </Nav>
        <Search />
        <ConnectionIndicator />
        <SettingsCog />
      </Navbar.Collapse>
    </Navbar>
  );
}