import React from "react";
import {
  Navbar,
  NavbarBrand,
  NavbarNav,
  NavbarItem,
  NavbarDropdown,
  NavbarColumn,
  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>
        <NavbarDropdown title="Two Columns" expand="lg" id="navbarDropdown">
          <div className="d-lg-flex">
            <NavbarColumn className="pr-lg-4">
              <div className="dropdown-category-header">Category</div>
              <NavbarDropdownItem href="#">Action</NavbarDropdownItem>
              <NavbarDropdownItem href="#">Another action</NavbarDropdownItem>
              <NavbarDropdownItem href="#">Something else here</NavbarDropdownItem>
            </NavbarColumn>
            <NavbarColumn>
              <div className="dropdown-category-header pt-4">Category</div>
              <NavbarDropdownItem href="#">Action</NavbarDropdownItem>
              <NavbarDropdownItem href="#">Another action</NavbarDropdownItem>
              <NavbarDropdownItem href="#">Something else here</NavbarDropdownItem>
              <div className="dropdown-category-header pt-4">Category</div>
              <NavbarDropdownItem href="#">Action</NavbarDropdownItem>
              <NavbarDropdownItem href="#">Another action</NavbarDropdownItem>
              <NavbarDropdownItem href="#">Something else here</NavbarDropdownItem>
            </NavbarColumn>
          </div>
        </NavbarDropdown>
        <NavbarDropdown
          title="Dropdown Arrow"
          expand="lg"
          id="navbarDropdown"
          hasDropdownArrow={true}
        >
          <NavbarDropdownItem href="#">Action</NavbarDropdownItem>
          <NavbarDropdownItem href="#">Another action</NavbarDropdownItem>
          <NavbarDropdownItem href="#">Something else here</NavbarDropdownItem>
        </NavbarDropdown>
        <NavbarDropdown
          title="Right Aligned"
          className="ml-lg-auto"
          id="navbarDropdown"
          expand="lg"
          position="right"
        >
          <NavbarDropdownItem href="#">Action</NavbarDropdownItem>
          <NavbarDropdownItem href="#">Another action</NavbarDropdownItem>
          <NavbarDropdownItem href="#">Something else here</NavbarDropdownItem>
        </NavbarDropdown>
      </NavbarNav>
    </Navbar>
  </>
);