import { Link, NavLink } from "react-router";
import { useAuth } from "../contexts/AuthContext"
import RoleGuard from "./RoleGuard";

const Navbar = () => {
    const {user, login, logout, isLoggedIn} = useAuth();

    return (
        <nav className="navbar">
            {/* Logo */}
            <Link to="#" className="nav-link">BrandName</Link>

            {/* Mobile Toggle (Checkbox Hack) */}
            <input type="checkbox" id="nav-toggle" className="nav-toggle" />
            <label htmlFor="nav-toggle" className="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </label>

            <ul className="nav-menu">
                <li>
                    <NavLink className="nav-link" to="/" end>
                        Home
                    </NavLink>
                </li>
                <li>
                    <NavLink className="nav-link" to="/about" end>
                        About
                    </NavLink>
                </li>

                {isLoggedIn() && (
                <li>
                    <NavLink className="nav-link" to="/posts" end>
                        Posts
                    </NavLink>
                </li>
                )}

                <RoleGuard allowedRoles={['ADMIN']}>
                    <li>
                        <NavLink className="nav-link" to="/admin" end>
                            Admin
                        </NavLink>
                    </li>
                </RoleGuard>

                {!isLoggedIn() && (
                    <>
                        <li>
                            <Link to="#" className="nav-link" onClick={login}>Login</Link>
                        </li>
                        <li>
                            <NavLink className="nav-link" to="/register">Register</NavLink>
                        </li>
                    </>
                )}

                {isLoggedIn() && (
                    <li>
                        <Link to="#" className="nav-link" onClick={logout}>Logout {user.name}</Link>
                    </li>
                )}
            </ul>
        </nav>
    )
}

export default Navbar