"use client";

import { useAuth } from "./AuthProvider";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";

export function Navbar() {
  const { user, loading, logout } = useAuth();

  return (
    <nav className="border-b border-slate-800/50 bg-slate-950/50 backdrop-blur-sm sticky top-0 z-50">
      <div className="container mx-auto px-4 h-12 flex items-center justify-between max-w-5xl">
        <a href="/" className="flex items-center gap-2 font-mono text-sm text-cyan-300 hover:text-cyan-200 transition-colors no-underline">
          <span>🤡</span>
          <span className="font-bold tracking-wider uppercase hidden sm:inline">BaraBingo</span>
        </a>

        {!loading && (
          <div className="flex items-center gap-3">
            {user ? (
              <>
                <div className="flex items-center gap-2">
                  <span className="text-xs font-mono text-slate-400">{user.nickname}</span>
                  {user.isAdmin && (
                    <Badge variant="default" className="text-[8px] px-1.5 py-0 uppercase">Admin</Badge>
                  )}
                </div>
                {user.isAdmin && (
                  <a href="/admin">
                    <Button variant="ghost" size="sm" className="text-xs font-mono h-7">⚙</Button>
                  </a>
                )}
                <Button variant="ghost" size="sm" className="text-xs font-mono text-slate-600 h-7" onClick={logout}>
                  EXIT
                </Button>
              </>
            ) : (
              <a href="/">
                <Button variant="outline" size="sm" className="text-xs font-mono h-7">LOGIN</Button>
              </a>
            )}
          </div>
        )}
      </div>
    </nav>
  );
}