import React from "react";

import {
  Icon,
  Navbar,
  NavbarBrand,
  NavbarNav,
  NavbarItem,
  NavbarDropdown,
  NavbarDropdownItem,
  NavbarLink
} from "../../";

import CloudBeesLogoIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/src/svg-logos/cloudbees-logo-color.svg";
import CloudBeesLogoWhiteIcon from "!!svg-sprite-loader!@cloudbees/honeyui-icons/src/svg-logos/cloudbees-logo-white.svg";

export default (
  <>
    <div className="mb-5">
      <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>
    </div>

    <div className="mb-5">
      <Navbar expand="lg" variant="dark" bg="dark" className="border-dark">
        <NavbarBrand>
          <Icon
            viewBox={CloudBeesLogoWhiteIcon.viewBox}
            id={CloudBeesLogoWhiteIcon.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>
    </div>

    <div className="mb-5">
      <Navbar expand="lg" variant="dark" bg="primary" className="border-primary">
        <NavbarBrand>
          <Icon
            viewBox={CloudBeesLogoWhiteIcon.viewBox}
            id={CloudBeesLogoWhiteIcon.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>
    </div>
  </>
);