import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import MenuIcon from '@mui/icons-material/Menu';
import CloseIcon from '@mui/icons-material/Close';
import $ from 'jquery';
import 'magnific-popup';
import 'magnific-popup/dist/magnific-popup.css';
import './Navbar.css';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    if (!isMenuOpen) {
      $.magnificPopup.open({
        items: {
          src: '#navbar-popup',
          type: 'inline'
        },
        midClick: true,
        closeOnBgClick: true,
        callbacks: {
          open: () => setIsMenuOpen(true),
          close: () => setIsMenuOpen(false),
        },
      });
    } else {
      $.magnificPopup.close();
    }
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <nav className="navbar">
      <div className="navbar-container">
        <div className="menu-icon" onClick={toggleMenu}>
          {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
        </div>
        <ul className="navbar-list">
          <li className="navbar-item"><Link to="/dashboard">Dashboard</Link></li>
          <li className="navbar-item"><Link to="/manage-ads">Manage Ads</Link></li>
          <li className="navbar-item"><Link to="/roles">Roles</Link></li>
          <li className="navbar-item"><Link to="/logout">Logout</Link></li>
        </ul>
        <div id="navbar-popup" className="mfp-hide">
          <ul className="navbar-list-popup">
            <li className="navbar-item"><Link to="/dashboard">Dashboard</Link></li>
            <li className="navbar-item"><Link to="/manage-ads">Manage Ads</Link></li>
            <li className="navbar-item"><Link to="/roles">Roles</Link></li>
            <li className="navbar-item"><Link to="/logout">Logout</Link></li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;