import React from 'react'
import {NavLink} from "react-router-dom";
import {bootstrapNavCloser, setImage} from "snippets";

export const Nav = () => {
  bootstrapNavCloser()

  return (
    <nav
      className="navbar navbar-light navbar-expand-md bg-primary fixed-top"
    >
      <div className="container">
        <NavLink className="navbar-brand" to="/">
          <img
            src={setImage('/logo.png', '/static/media/images')}
            alt="Logo"
            style={{
              width: '60px',
              overflow: 'hidden'
            }}
          />
        </NavLink>

        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#mainNav" aria-controls="mainNav"
                aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"/>
        </button>

        <div className="collapse navbar-collapse navbar-nav" id="mainNav">
          <ul className="navbar-nav ms-auto">
            <li className="nav-item">
              <NavLink
                to="/"
                className={isActive => "nav-link" + (!isActive ? ' unselected' : '')}
                aria-current="page"
                style={({isActive}) => ({
                  color: isActive ? 'var(--bs-secondary)' : '',
                  textShadow: isActive ? '0 0 1px var(--bs-secondary), 0 0 1px var(--bs-secondary)' : '',

                })}
              >
                Home
              </NavLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}