import Link from 'next/link';
import React from 'react';

const navItems = [
    { title: 'Home', link: '/' },
    {
        title: 'Service',
        link: '/services-digital-solutions',
        submenu: [
            { title: 'Website Development', link: '/services-digital-solutions/website-development-company' },
            { title: 'Mobile Application Development', link: '/services-digital-solutions/mobile-application-development' },
            { title: 'Graphic Designing', link: '/services-digital-solutions/graphic-designing-company' },
            { title: 'UI / UX Designing', link: '/services-digital-solutions/ui-ux-designing' },
            { title: 'SEO & Content Writing', link: '/services-digital-solutions/search-engine-optimization-seo-content-writing' },
            { title: 'Digital Marketing', link: '/services-digital-solutions/digital-marketing-agency-in-canada' },
            { title: 'ERP Development & Implementation', link: '/services-digital-solutions/erp-development-implementation' },
        ],
    },
    { title: 'Portfolio', link: '/portfolio' },
    { title: 'About', link: '/about-us' },
    { title: 'Career', link: '/careers' },
    { title: 'Blog', link: '/blog' },
    { title: 'Contact', link: '/contact' },
    { title: 'Faq', link: '/faq' },
];

const NavItemsMetatron = () => {
    return (
        <ul>
            {navItems.map((item, index) => (
                <li key={index} className={item.submenu ? "has-dropdown" : ""}>
                    <Link href={item.link}>
                        {item.title} {item.submenu && <i className="fa-solid fa-angle-down ms-1"></i>}
                    </Link>
                    {item.submenu && (
                        <ul className="submenu">
                            {item.submenu.map((sub, i) => (
                                <li key={i}>
                                    <Link href={sub.link}>{sub.title}</Link>
                                </li>
                            ))}
                        </ul>
                    )}
                </li>
            ))}
        </ul>
    );
};

export default NavItemsMetatron;