import { Link } from "gatsby"
import React, { useState } from "react"
import { Container, Nav, Navbar } from "react-bootstrap"
import { FaHome, FaTabletAlt } from "react-icons/fa"
import "./navbar.scss"

const NavBar = () => {
  const [zIndex] = useState(9997)


  return (
    <>
      <Navbar
        collapseOnSelect
        expand="lg"
        fixed="top"
        bg="white"
        style={{ zIndex: zIndex }}
        className="shadow"
      >
        <Container fluid="sm">
          <Navbar.Collapse>
            <Nav className="m-lg-auto mt-sm-3">
              <Link to="/" activeClassName="active" className="nav-link mx-40">
                <FaHome className="icon-mobilev2 d-lg-none mt-1 flex-column">
                  {" "}
                </FaHome>
                <span className="d-none d-lg-block">Home</span>
                <span className="d-lg-none icon-namev2">Home</span>
              </Link>
              <Link
                to="/tablet"
                activeClassName="active"
                className="nav-link mx-40"
              >
                <FaTabletAlt className="icon-mobilev2 d-lg-none mt-1 flex-column"></FaTabletAlt>
                <span className="d-none d-lg-block">Tablet</span>
                <span className="d-lg-none icon-namev2">Tablet</span>
              </Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  )
}

export default NavBar