import React, { useContext } from "react";
import { Navbar as BootstrapNavbar, Container, Button } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import { AuthContext } from "../../context/AuthContext";
import { FaGraduationCap, FaUserAlt, FaSignOutAlt } from "react-icons/fa";
import "./Navbar.css";

function Navbar() {
  const { userLogin, logout } = useContext(AuthContext);
  const navigate = useNavigate();

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

  return (
    <BootstrapNavbar className="navbar-edukita" expand="lg">
      <Container fluid>
        <BootstrapNavbar.Brand 
          className="navbar-brand-edukita" 
          style={{ cursor: 'pointer' }}
          onClick={() => navigate('/')}
        >
          <FaGraduationCap className="brand-icon" />
          <span className="brand-name">EduKita</span>
        </BootstrapNavbar.Brand>

        <div className="navbar-right">
          {userLogin ? (
            <>
              <span className="user-info">
                <FaUserAlt className="me-2" /> <strong>{userLogin.nama}</strong>
                <span className="user-role ms-1">
                  ({userLogin.role === "admin" ? "Admin" : "User"})
                </span>
              </span>

              <Button
                variant="outline-light"
                size="sm"
                onClick={handleLogout}
                className="btn-logout d-flex align-items-center gap-2"
              >
                <FaSignOutAlt /> Logout
              </Button>
            </>
          ) : (
            <div className="guest-buttons d-flex gap-2">
              <Button 
                variant="outline-light" 
                size="sm" 
                onClick={() => navigate('/login')}
              >
                Login
              </Button>
              <Button 
                variant="light" 
                size="sm" 
                onClick={() => navigate('/register')}
                className="text-primary fw-bold"
              >
                Daftar
              </Button>
            </div>
          )}
        </div>
      </Container>
    </BootstrapNavbar>
  );
}

export default Navbar;
