import React from "react";
import {
  Navbar,
  NavbarBrand,
  NavbarNav,
  NavbarItem,
  NavbarDropdown,
  NavbarDropdownItem,
  NavbarLink
} from "../../";
import { Icon } from "../..";
import CloudBeesLogoIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/src/svg-logos/cloudbees-logo-color.svg";

export default (
  <>
    <Navbar expand="lg" variant="light" bg="white">
      <NavbarBrand>
        <Icon viewBox={CloudBeesLogoIcon.viewBox} id={CloudBeesLogoIcon.id} width={131} />
      </NavbarBrand>

      <NavbarNav>
        <NavbarItem active={true}>
          <NavbarLink href="#">Home</NavbarLink>
        </NavbarItem>
        <NavbarItem>
          <NavbarLink href="#">Link</NavbarLink>
        </NavbarItem>
        <NavbarDropdown title="Dropdown" id="navbarDropdown" expand="lg">
          <NavbarDropdownItem href="#">Action</NavbarDropdownItem>
          <NavbarDropdownItem href="#">Another action</NavbarDropdownItem>
          <NavbarDropdownItem href="#">Something else here</NavbarDropdownItem>
        </NavbarDropdown>
        <NavbarItem disabled={true}>
          <NavbarLink href="#" isDisabled={true}>
            Disabled
          </NavbarLink>
        </NavbarItem>
      </NavbarNav>
    </Navbar>
  </>
);