"use client";
import React from 'react';
import Link from 'next/link';

interface MobileMenuProps {
    isMobileMenuOpen: boolean;
    toggleMobileMenu: () => void;
    themeBtn?: string;
    arrow?: boolean;
    arrow2?: boolean;
}

const navItems = [
    { title: 'Home', link: '#home' },
    { title: 'About', link: '#about' },
    { title: 'Services', link: '#services' },
    { title: 'Portfolio', link: '#portfolio' },
    { title: 'FAQ', link: '#faq' },
    { title: 'Contact', link: '#contact-trigger' },
];

const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileMenu }) => {
    return (
        <div className="homepage1-body">
            <div className={`vl-offcanvas ${isMobileMenuOpen ? 'vl-offcanvas-open' : ''}`}>
                <div className="vl-offcanvas-wrapper">
                    <div className="vl-offcanvas-header d-flex justify-content-between align-items-center">
                        <div className="vl-offcanvas-logo">
                            <Link href="#home" onClick={toggleMobileMenu}>
                                <img loading="lazy" src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
                            </Link>
                        </div>
                        <div className="vl-offcanvas-close">
                            <button className="vl-offcanvas-close-toggle" onClick={toggleMobileMenu}>
                                <i className="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                    </div>

                    <div className="vl-offcanvas-menu d-lg-none mb-40">
                        <nav>
                            <ul>
                                {navItems.map((item, index) => (
                                    <li key={index}>
                                        <Link
                                            href={item.link}
                                            onClick={(e) => {
                                                if (item.link === '#contact-trigger') {
                                                    e.preventDefault();
                                                    window.dispatchEvent(new CustomEvent('openContactPopup'));
                                                }
                                                toggleMobileMenu();
                                            }}
                                        >
                                            {item.title}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </nav>
                    </div>

                    <div className="space20"></div>
                    <div className="vl-offcanvas-info">
                        <h3 className="vl-offcanvas-sm-title mb-2">Contact Us</h3>
                        <span><a href="tel:+16476797651"><i className="fa-solid fa-phone"></i> +1-647-679-7651</a></span>
                        <span><a href="mailto:info@metatroncubesolutions.com"><i className="fa-regular fa-envelope"></i> info@metatroncubesolutions.com</a></span>
                    </div>

                    <div className="space20"></div>
                    <div className="vl-offcanvas-social">
                        <h3 className="vl-offcanvas-sm-title mb-2">Follow Us</h3>
                        <a href="https://www.facebook.com/metatroncubecanada" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-f"></i></a>
                        <a href="https://x.com/MetatroncubeDA" target="_blank" rel="noopener noreferrer"><i className="fa-brands fa-twitter"></i></a>
                        <a href="https://www.linkedin.com/company/metatroncube-software-solutions/posts/?feedView=all" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin-in"></i></a>
                        <a href="https://www.instagram.com/metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram"></i></a>
                        <a href="https://www.youtube.com/@metatron_digitalagency" target="_blank" rel="noopener noreferrer"><i className="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
            <div className={`vl-offcanvas-overlay ${isMobileMenuOpen ? 'vl-offcanvas-overlay-open' : ''}`} onClick={toggleMobileMenu}></div>
        </div>
    );
};

export default MobileMenu;