import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Button } from './ui/button';
import { Users, LogOut, LayoutDashboard } from 'lucide-react';

const Navbar = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <nav className="bg-white border-b border-[#EAE0D5] sticky top-0 z-50 backdrop-blur-sm bg-white/90">
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex justify-between items-center">
          <Link to={user ? "/dashboard" : "/"} className="flex items-center gap-2">
            <Users className="h-8 w-8 text-[#E07A5F]" strokeWidth={1.5} />
            <span className="text-2xl font-semibold fraunces text-[#3D405B]">Membership</span>
          </Link>
          
          <div className="flex items-center gap-4">
            {user ? (
              <>
                {user.role === 'admin' && (
                  <Link to="/admin">
                    <Button
                      variant="ghost"
                      className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
                      data-testid="admin-nav-button"
                    >
                      <LayoutDashboard className="h-4 w-4 mr-2" />
                      Admin
                    </Button>
                  </Link>
                )}
                <Link to="/events">
                  <Button
                    variant="ghost"
                    className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
                    data-testid="events-nav-button"
                  >
                    Events
                  </Button>
                </Link>
                <Link to="/profile">
                  <Button
                    variant="ghost"
                    className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
                    data-testid="profile-nav-button"
                  >
                    Profile
                  </Button>
                </Link>
                <Button
                  onClick={handleLogout}
                  className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
                  data-testid="logout-button"
                >
                  <LogOut className="h-4 w-4 mr-2" />
                  Logout
                </Button>
              </>
            ) : (
              <>
                <Link to="/login">
                  <Button
                    variant="ghost"
                    className="text-[#3D405B] hover:text-[#E07A5F] hover:bg-[#F2CC8F]/10"
                    data-testid="login-nav-button"
                  >
                    Login
                  </Button>
                </Link>
                <Link to="/register">
                  <Button
                    className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-6"
                    data-testid="register-nav-button"
                  >
                    Join Us
                  </Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;