'use client';

import Link from 'next/link';
import HeaderMenu from './HeaderMenu';

const homeMegaMenu = (
    <>
        <div className="homemenu">
            <div className="homemenu-thumb">
                <img src="/assets/img/header/home-1.jpg" alt="img" />
                <div className="demo-button">
                    <Link href="/" className="theme-btn">
                        Multi Page <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                </div>
            </div>
            <div className="homemenu-content text-center">
                <h4 className="homemenu-title">
                    Home 01
                </h4>
            </div>
        </div>
        <div className="homemenu">
            <div className="homemenu-thumb mb-15">
                <img src="/assets/img/header/home-2.jpg" alt="img" />
                <div className="demo-button">
                    <Link href="/index-2" className="theme-btn">
                        Multi Page <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                </div>
            </div>
            <div className="homemenu-content text-center">
                <h4 className="homemenu-title">
                    Home 02
                </h4>
            </div>
        </div>
        <div className="homemenu">
            <div className="homemenu-thumb mb-15">
                <img src="/assets/img/header/home-3.jpg" alt="img" />
                <div className="demo-button">
                    <Link href="/index-3" className="theme-btn">
                        Multi Page <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                </div>
            </div>
            <div className="homemenu-content text-center">
                <h4 className="homemenu-title">
                    Home 03
                </h4>
            </div>
        </div>
    </>
);

const menuItems = [
    {
        label: 'Home',
        href: '/',
        megaMenuContent: homeMegaMenu
    },
    {
        label: 'About Us',
        href: '/about'
    },
    {
        label: 'Pages',
        href: '#',
        submenu: [
            {
                label: 'Service',
                href: '#',
                submenu: [
                    { label: 'Service', href: '/service' },
                    { label: 'Service Details', href: '/service-details' }
                ]
            },
            {
                label: 'Country List',
                href: '#',
                submenu: [
                     { label: 'Country List', href: '/country-list' },
                     { label: 'Country Details', href: '/country-details' }
                ]
            },
            { label: 'Our Pricing', href: '/pricing' },
            { label: 'Appointment', href: '/appointment' },
            { label: '404 Page', href: '/404' },
            { label: 'Coming Soon', href: '/coming-soon' }
        ]
    },
    {
        label: 'VISA',
        href: '#',
        submenu: [
            { label: 'Visa List', href: '/country-list' },
            { label: 'Visa Details', href: '/country-details' }
        ]
    },
    {
        label: 'Blog',
        href: '#',
        submenu: [
            { label: 'Blog Grid', href: '/news-grid' },
            { label: 'Blog Standard', href: '/news' },
            { label: 'Blog Details', href: '/news-details' }
        ]
    },
    {
        label: 'Contact Us',
        href: '/contact'
    }
];

const HeaderBottom = () => {
    return (
        <header id="header-sticky" className="header-1">
            <div className="container-fluid">
                <div className="mega-menu-wrapper">
                    <div className="header-main">
                        <div className="header-left">
                            <div className="logo">
                                <Link href="/" className="header-logo-2">
                                    <img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
                                </Link>
                            </div>
                            <div className="mean__menu-wrapper">
                                <HeaderMenu menuItems={menuItems} />
                            </div>
                        </div>
                        <div className="header-right d-flex align-items-center mt-0">
                            <div className="header-call-item">
                                <a href="#" className="main-header__search search-toggler">
                                    <i className="fa-regular fa-magnifying-glass"></i>
                                </a>
                                <Link href="/contact" className="theme-btn">
                                    Apply now
                                    <i className="fa-solid fa-arrow-right"></i>
                                </Link>
                                <div className="header__hamburger my-auto">
                                    <div className="sidebar__toggle">
                                        <i className="fa-solid fa-bars-staggered"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
};

export default HeaderBottom;