'use client';
import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Navbar: React.FC = () => {
  const pathname = usePathname();

  const navItems = [
    { href: '/', label: 'Inicio' },
    { href: '/user/eventos', label: 'Eventos' },
    { href: '/user/qr', label: 'Lector de QRs' },
    { href: '/user/eventos/crear', label: 'Crear Evento' },
    { href: '/user/usuarios', label: 'Usuarios' },
    { href: '/signout', label: 'Cerrar sesión' },
  ];

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-azul">
      <div className="container">
        <button
          className="navbar-toggler border-0 ms-auto"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasNavbar"
          aria-controls="offcanvasNavbar"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div
          className="offcanvas offcanvas-end"
          tabIndex={-1}
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
        >
          <div className="offcanvas-header">
            <h5 className="offcanvas-title" id="offcanvasNavbarLabel">
              Menu
            </h5>
            <button
              type="button"
              className="btn-close"
              data-bs-dismiss="offcanvas"
              aria-label="Close"
            ></button>
          </div>
          <div className="offcanvas-body align-items-center justify-content-between">
            <h2 className="h5 mb-0 text-white">
              Sistema de Registro de Eventos
            </h2>
            <ul className="navbar-nav gap-lg-5">
              {navItems.map((item, index) => (
                <li
                  key={index}
                  className={`nav-item`}
                  data-bs-dismiss="offcanvas"
                >
                  <Link
                    className={`nav-link ${
                      pathname === item.href ? 'text-white' : ''
                    }`}
                    href={item.href}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;
