import { NavLink } from 'react-router-dom';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Container from 'react-bootstrap/Container';
import { useI18n } from '../i18n/context';

const BASE = import.meta.env.BASE_URL || '/';
const logoImg = `${BASE}logo.png`;

function AppNavbar() {
  const { lang, setLang, t } = useI18n();

  return (
    <Navbar bg="dark" variant="dark" expand="lg" className="app-navbar">
      <Container fluid>
        <Navbar.Brand as={NavLink} to="/" className="fw-bold d-flex align-items-center gap-2">
          <img src={logoImg} alt="Logo" className="brand-logo" />
          <span>
            <span className="brand-proserve">PROSERVE</span>
            <span className="brand-report ms-2">Report</span>
          </span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="main-nav" />
        <Navbar.Collapse id="main-nav">
          <Nav className="me-auto">
            <Nav.Link as={NavLink} to="/" end>
              {t('nav.dashboard')}
            </Nav.Link>
            <Nav.Link as={NavLink} to="/sessions">
              {t('nav.sessions')}
            </Nav.Link>
            <Nav.Link as={NavLink} to="/users">
              {t('nav.users')}
            </Nav.Link>
          </Nav>
          <div className="lang-switcher">
            <button
              className={`lang-btn ${lang === 'fr' ? 'active' : ''}`}
              onClick={() => setLang('fr')}
            >
              FR
            </button>
            <button
              className={`lang-btn ${lang === 'en' ? 'active' : ''}`}
              onClick={() => setLang('en')}
            >
              EN
            </button>
          </div>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default AppNavbar;
