import { NavLink } from 'react-router-dom';
interface NavigationProps {
    hidePopup: () => void; // hidePopup is a function that takes no arguments and returns void
}
const isActiveLink = (path: string) => location.pathname.startsWith(path);
const Navigation = ({ hidePopup }: NavigationProps) => {
    
    // Function to hide popup when a NavLink is clicked
    const handleNavLinkClick = () => {
        hidePopup();
    };

    return (
        <ul id="menu-mobile-menu" className="menu wer">
            <li>
                <NavLink
                    to="/"
                    className={({ isActive }) => (isActive ? 'active' : '')}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Home
                </NavLink>
            </li>
         
            <li id="menu-item-5981" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5981">
                <NavLink
                    to="/for-sale"
                    className={({ isActive }) => isActive || isActiveLink('/sale/') ? 'active' : ''}

                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Buy
                </NavLink>
            </li>
            <li id="menu-item-5980" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5980">
                <NavLink
                    to="/for-rent"
                    className={({ isActive }) => isActive || isActiveLink('/rent/') ? 'active' : ''}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Rent
                </NavLink>
            </li>
            <li className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5981">
                <NavLink
                    to="/offplan-properties-for-sale"
                    className={({ isActive }) => isActive || isActiveLink('/offplan-project/') ? 'active' : ''}

                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Off-Plan
                </NavLink>
            </li>
            <li id="menu-item-5983" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5983">
                <NavLink
                    to="/area-guides"
                    className={({ isActive }) => isActive || isActiveLink('/area-guides-detail/') ? 'active' : ''}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Communities
                </NavLink>
            </li>
            <li id="menu-item-5980" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5980">
                <NavLink to="/contact-us" 
                className={({ isActive }) => isActive || isActiveLink('/rent/') ? 'active' : ''}
                onClick={handleNavLinkClick}
                >Sell/Rent your Property</NavLink>
            </li>
           
            
            
           
            <li className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5981">
                <NavLink
                    to="article/about-us"
                    className={({ isActive }) => (isActive ? 'active' : '')}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    About Us
                </NavLink>
            </li>
            <li id="menu-item-5982" className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5982">
                <NavLink
                    to="/career"
                    className={({ isActive }) => (isActive ? 'active' : '')}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Careers
                </NavLink>

            </li>
            <li className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5981">
                <NavLink
                    to="/articles/news-media"
                    className={({ isActive }) => (isActive ? 'active' : '')}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Our Blog
                </NavLink>
            </li>
            <li className="menu-item menu-item-type-post_type menu-item-object-page menu-item-5981">
                <NavLink
                    to="/contact-us"
                    className={({ isActive }) => (isActive ? 'active' : '')}
                    onClick={handleNavLinkClick} // Hide popup on click
                >
                    Contact Us
                </NavLink>
            </li>
         
           
           
             
        </ul>
    );
};

export default Navigation;
