import React from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const linkBase = 'font-semibold text-sm py-2.5 px-5 rounded-lg transition-colors text-center flex-1';
const linkActive = 'bg-azul-glm text-white';
const linkInactive = 'bg-verde-bg text-azul-glm hover:bg-verde-glm hover:text-white border border-verde-glm/40';

export default function NavBar() {
  const { signOut, user } = useAuth();

  return (
    <nav className="flex items-center gap-3 bg-white p-3 rounded-xl border border-gris-medio/30 shadow-sm mb-8">
      <NavLink
        to="/dashboard/encuesta-terminacion"
        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
      >
        Encuesta Terminacion
      </NavLink>
      <NavLink
        to="/dashboard/carnet"
        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
      >
        Carnets
      </NavLink>
      <NavLink
        to="/dashboard/glmway"
        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
      >
        GLMWAY
      </NavLink>
      <NavLink
        to="/dashboard/enps"
        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
      >
        eNPS
      </NavLink>
      <NavLink
        to="/dashboard/rrhh-docs"
        className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
      >
        Documentos RRHH
      </NavLink>

    </nav>
  );
}