import { Link, useLocation } from "react-router-dom";

interface Props {
  username: string;
  onLogout: () => void;
}

export function Navbar({ username, onLogout }: Props) {
  const { pathname } = useLocation();

  function navClass(path: string) {
    const base =
      "px-4 py-2 rounded-lg text-sm font-medium transition-colors";
    return pathname === path
      ? `${base} bg-indigo-600 text-white`
      : `${base} text-slate-300 hover:text-white hover:bg-slate-700`;
  }

  return (
    <nav className="bg-slate-800 border-b border-slate-700 sticky top-0 z-10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-14">
          {/* Logo + nav links */}
          <div className="flex items-center gap-2">
            <span className="text-indigo-400 font-bold text-lg mr-4 hidden sm:block">
              Analytics
            </span>
            <Link to="/" className={navClass("/")}>
              Dashboard
            </Link>
            <Link to="/events" className={navClass("/events")}>
              Events
            </Link>
          </div>

          {/* User info + logout */}
          <div className="flex items-center gap-3">
            <span className="text-slate-400 text-sm hidden sm:block">
              {username}
            </span>
            <button
              onClick={onLogout}
              className="text-sm font-medium text-slate-300 hover:text-white bg-slate-700 hover:bg-slate-600
                         px-3 py-1.5 rounded-lg transition-colors"
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}