import Link from "next/link"
// import { useRouter } from "next/router"
import Rehabilitation from "@/utils/Rehabilitation.utils"
import Accident from "@/utils/Accident.utils"
import { areaOfInjuryData } from "@/utils/AreaOfInjery.utils"
import { servicesList } from "@/utils/Services.utils"

export default function Menu() {
    // const router = useRouter()

    return (
        <>
            {/* <ul className="sub-menu">
                <Link className={router.pathname == "/" ? "active" : ""}>Home Default</Link>
                <Link className={router.pathname == "/index-2" ? "active" : ""}>Home Interior</Link>
            </ul> */}

            <ul className="navigation new-nav clearfix">
                <li className="dropdown"><Link href="/" aria-label="Home page">Home</Link>
                    {/* <ul>
                        <li><Link href="/">Home Page One</Link></li>
                        <li><Link href="/index-2">Home Page Two</Link></li>
                        <li><Link href="/index-3">Home Page Three</Link></li>
                        <li><Link href="/onepage">OnePage Home</Link></li>
                    </ul> */}
                </li>

                <li className="dropdown menu-item-has-children"><Link href="/about-us" aria-label="About Us">About Us</Link>
                    <ul>
                        <li><Link href="/our-team-physiotherapy-etobicoke" aria-label="Our Team">Our Team</Link></li>
                        <li><Link href="/ourapproach-physiotherapy-etobicoke" aria-label="Our Approach">Our Approach</Link></li>
                        <li><Link href="/gallery-physiotherapy-etobicoke" aria-label="Gallery">Gallery</Link></li>
                        <li><Link href="/covid-19-updates" aria-label="Covid 19 Updates">Covid-19-Updates</Link></li>
                    </ul>
                </li>

                <li className="dropdown menu-item-has-children relative group">
                    <Link href="/etobicoke-treatment-service" aria-label="Services">Services</Link>
                    {/* Dropdown */}
                    <ul className="absolute left-0 hidden group-hover:grid p-4
                 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
                        style={{ columnCount: 4, width: "100%", left: "0px" }}>
                        {servicesList.map((item) => (
                            <li key={item.id} className="break-inside-avoid">
                                <Link href={`/etobicoke-treatment-service/${item.slug}`} aria-label="Etobicoke Treatment Service">
                                    {item.shortTitle}
                                </Link>
                            </li>
                        ))}
                    </ul>
                </li>

                {/* <li className="dropdown"><Link href="/">Team</Link>
                    <ul>
                        <li><Link href="/team">Our Team</Link></li>
                        <li><Link href="/team-details">Team Details</Link></li>
                    </ul>
                </li> */}

                {/* Pages */}
                {/* <li className="dropdown"><Link href="/">Pages</Link>
                    <ul>
                        <li className="dropdown"><Link href="/">Blog</Link>
                            <ul>
                                <li><Link href="/blog">Blog Grid</Link></li>
                                <li><Link href="/blog-2">Blog Sidebar</Link></li>
                                <li><Link href="/blog-details">Blog Details</Link></li>
                            </ul>
                        </li>
                        <li><Link href="/tesmonial">Tesmonial</Link></li>
                        <li><Link href="/works">How it works</Link></li>
                        <li><Link href="/chooseus">Why Choose Us</Link></li>
                        <li><Link href="/pricing-table">Pricing-Table</Link></li>
                        <li><Link href="/faq">Faq's</Link></li>
                        <li><Link href="/gallery">Gallery</Link></li>
                        <li><Link href="/appointment">Make Appointment</Link></li>
                        <li><Link href="/error-page">Page Not Found</Link></li>
                    </ul>
                </li> */}

                <li className="dropdown menu-item-has-children"><Link href="/area-of-injury" aria-label="Area of Injury">Area of Injury</Link>
                    <ul>
                        {areaOfInjuryData.map(item => (
                            <li key={item.id}>
                                <Link href={`/area-of-injury/${item.slug}`} aria-label="Area of Injury Title">
                                    {item.title}
                                </Link>
                            </li>
                        ))}
                    </ul>
                      {/* <ul className="absolute left-0 hidden group-hover:grid p-4
                 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
                        style={{ columnCount: 2, width: "50%", left: "480px" }}>
                        {areaOfInjuryData.map((item) => (
                            <li key={item.id} className="break-inside-avoid">
                                <Link href={`/area-of-injury/${item.slug}`}>
                                    {item.title}
                                </Link>
                            </li>
                        ))}
                    </ul> */}
                </li>

                <li className="dropdown menu-item-has-children"><Link href="/rehabilitation" aria-label="Rehabilitation">Rehabilitation</Link>
                    <ul>
                        {Rehabilitation.map(item => (
                            <li key={item.id}>
                                <Link href={`/rehabilitation/${item.slug}`} aria-label="Rehabilitation Title">
                                    {item.title}
                                </Link>
                            </li>
                        ))}
                    </ul>
                </li>

                <li className="dropdown menu-item-has-children"><Link href="/accident" aria-label="Accident">Accident</Link>
                    <ul>
                        {Accident.map(item => (
                            <li key={item.id}>
                                <Link href={`/accident/${item.slug}`} aria-label="Accident Title">
                                    {item.title}
                                </Link>
                            </li>
                        ))}
                    </ul>
                </li>

                <li><Link href="/blog" aria-label="Blog">Blog</Link></li>

                {/* Contact */}
                <li><Link href="/contact" aria-label="Contact">Contact</Link></li>
            </ul>
        </>
    )
}