import React from "react";
import { Nav, NavItem, NavLink } from "../../";

export default (
  <div className="m-5">
    <Nav as="ul" className="justify-content-center">
      <NavItem as="li">
        <NavLink href="#" isActive={true}>
          Active
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#" isDisabled={true}>
          Disabled
        </NavLink>
      </NavItem>
    </Nav>

    <Nav as="ul" className="justify-content-end">
      <NavItem as="li">
        <NavLink href="#" isActive={true}>
          Active
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#" isDisabled={true}>
          Disabled
        </NavLink>
      </NavItem>
    </Nav>

    <Nav as="ul" className="flex-column mt-5">
      <NavItem as="li">
        <NavLink href="#" isActive={true}>
          Active
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#" isDisabled={true}>
          Disabled
        </NavLink>
      </NavItem>
    </Nav>

    <Nav as="nav" className="flex-column mt-5">
      <NavLink href="#" isActive={true}>
        Active
      </NavLink>
      <NavLink href="#">Link</NavLink>
      <NavLink href="#">Link</NavLink>
      <NavLink href="#" isDisabled={true}>
        Disabled
      </NavLink>
    </Nav>

    <Nav as="ul" className="mt-5" variant="pills" isFill={true}>
      <NavItem as="li">
        <NavLink href="#" isActive={true}>
          Active
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Much longer nav link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#" isDisabled={true}>
          Disabled
        </NavLink>
      </NavItem>
    </Nav>

    <Nav as="nav" className="mt-5" variant="pills" isFill={true}>
      <NavLink href="#" className="nav-item" isActive={true}>
        Active
      </NavLink>
      <NavLink href="#" className="nav-item">
        Much longer nav link
      </NavLink>
      <NavLink href="#" className="nav-item">
        Link
      </NavLink>
      <NavLink href="#" className="nav-item" isDisabled={true}>
        Disabled
      </NavLink>
    </Nav>

    <Nav as="ul" className="mt-5" variant="pills" isJustified={true}>
      <NavItem as="li">
        <NavLink href="#" isActive={true}>
          Active
        </NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Much longer nav link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#">Link</NavLink>
      </NavItem>
      <NavItem as="li">
        <NavLink href="#" isDisabled={true}>
          Disabled
        </NavLink>
      </NavItem>
    </Nav>

    <Nav as="nav" className="mt-5" variant="pills" isJustified={true}>
      <NavItem href="#" as={NavLink} isActive={true}>
        Active
      </NavItem>
      <NavItem href="#" as={NavLink}>
        Much longer nav link
      </NavItem>
      <NavItem href="#" as={NavLink}>
        Link
      </NavItem>
      <NavItem href="#" as={NavLink} isDisabled={true}>
        Disabled
      </NavItem>
    </Nav>

    <Nav as="nav" className="mt-5 flex-column flex-sm-row" variant="pills">
      <NavLink className="flex-sm-fill text-sm-center" href="#" isActive={true}>
        Active
      </NavLink>
      <NavLink className="flex-sm-fill text-sm-center" href="#">
        Much longer nav link
      </NavLink>
      <NavLink className="flex-sm-fill text-sm-center" href="#">
        Link
      </NavLink>
      <NavLink className="flex-sm-fill text-sm-center" href="#" isDisabled={true}>
        Disabled
      </NavLink>
    </Nav>
  </div>
);
