source: frontend/src/Nav.tsx@ 3727852

import { Link } from "react-router-dom";
import axiosInstance from "./api/axiosInstance";
import Logo from "./assets/logo-finkwave.png";
import { useAuth } from "./context/authContext";

const Nav = () => {
        const { user, setUser, isAuthLoading } = useAuth();

        const handleLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
                e.preventDefault();
                try {
                        await axiosInstance.post("/auth/logout");
                        setUser(undefined);
                } catch (error) {
                        console.error("Logout failed:", error);
                }
        };

        return (
                <div className="bg-gray-800 p-4 flex justify-between items-center">
                        <Link to="/" className="text-white text-lg font-semibold">
                                <img src={Logo} alt="Finkwave Logo" className="h-12 w-auto" />
                        </Link>

                        <div className="flex items-center space-x-4">
                                {!isAuthLoading && (
                                        <div className="flex items-center space-x-3">
                                                {user ? (
                                                        <div className="flex items-center space-x-3">
                                                                <div className="flex items-center space-x-2 bg-slate-700 rounded-lg px-3 py-2">
                                                                        <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                                                                                <span className="text-white text-sm font-semibold">
                                                                                        {user.username.charAt(0).toUpperCase()}
                                                                                </span>
                                                                        </div>
                                                                        <div className="text-white">
                                                                                <p className="text-sm font-medium">{user.username}</p>
                                                                                <p className="text-xs text-gray-300 capitalize">
                                                                                        {user.role}
                                                                                </p>
                                                                        </div>
                                                                </div>
                                                                <button
                                                                        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
                                                                                handleLogout(e)
                                                                        }
                                                                        className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm 
                                    font-medium transition-colors duration-200 flex items-center space-x-1 cursor-pointer"
                                                                >
                                                                        Logout
                                                                </button>
                                                        </div>
                                                ) : (
                                                        <div className="flex items-center space-x-4">
                                                                <Link
                                                                        to="/login"
                                                                        className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm 
                                    font-medium transition-colors duration-200 cursor-pointer"
                                                                >
                                                                        Login
                                                                </Link>
                                                                <Link
                                                                        to="/register"
                                                                        className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm
                                    font-medium transition-colors duration-200 cursor-pointer"
                                                                >
                                                                        Register
                                                                </Link>
                                                        </div>
                                                )}
                                        </div>
                                )}
                        </div>
                </div>
        );
};

export default Nav;