"use client";
import React, { useEffect } from "react";

const Offcanvas = () => {
    useEffect(() => {
        if (typeof window !== "undefined" && (window as any).jQuery && (window as any).jQuery.fn.meanmenu) {
            (window as any).jQuery('#mobile-menu').meanmenu({
                meanMenuContainer: '.mobile-menu',
                meanScreenWidth: "1199",
                meanExpand: ['<i class="far fa-plus"></i>'],
            });
        }
    }, []);

    const closeOffcanvas = () => {
        document.querySelector(".offcanvas__info")?.classList.remove("info-open");
        document.querySelector(".offcanvas__overlay")?.classList.remove("overlay-open");
    };

    return (
        <>
            <div className="fix">
                <div className="offcanvas__info">
                    <div className="offcanvas__wrapper">
                        <div className="offcanvas__content">
                            <div className="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
                                <div className="offcanvas__logo">
                                    <a href="/"><img src="/assets/img-app/home/footer/footer-logo-black.webp" alt="Header Logo" /></a>
                                </div>
                                <div className="offcanvas__close">
                                    <button onClick={closeOffcanvas}><i className="fal fa-times"></i></button>
                                </div>
                            </div>
                            <div className="offcanvas__search mb-25">
                                <p className="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum maxime accusamus corrupti natus obcaecati vitae dignissimos, id officiis similique eos.</p>
                            </div>
                            <div className="mobile-menu fix mb-40"></div>
                            <div className="offcanvas__contact mt-30 mb-20">
                                <h4>Contact Info</h4>
                                <ul>
                                    <li className="d-flex align-items-center">
                                        <div className="offcanvas__contact-icon mr-15">
                                            <i className="fal fa-map-marker-alt"></i>
                                        </div>
                                        <div className="offcanvas__contact-text">
                                            <a target="_blank" href="#">31 Park End St, Brockhampton, UK</a>
                                        </div>
                                    </li>
                                    <li className="d-flex align-items-center">
                                        <div className="offcanvas__contact-icon mr-15">
                                            <i className="far fa-phone"></i>
                                        </div>
                                        <div className="offcanvas__contact-text">
                                            <a href="tel:+00112233665">+00112233665</a>
                                        </div>
                                    </li>
                                    <li className="d-flex align-items-center">
                                        <div className="offcanvas__contact-icon mr-15">
                                            <i className="fal fa-envelope"></i>
                                        </div>
                                        <div className="offcanvas__contact-text">
                                            <a href="mailto:support@example.com">support@example.com</a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div className="offcanvas__social">
                                <ul>
                                    <li><a href="#"><i className="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i className="fab fa-twitter"></i></a></li>
                                    <li><a href="#"><i className="fab fa-youtube"></i></a></li>
                                    <li><a href="#"><i className="fab fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="offcanvas__overlay" onClick={closeOffcanvas}></div>
            <div className="offcanvas__overlay-white"></div>
        </>
    );
};

export default Offcanvas;
