"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

interface NavItem {
    id: string | number;
    title: string;
    shortDescription: string;
}

export default function SideNav({ navData }: { navData: NavItem[] }) {
    const pathname = usePathname();

    // const extractHref = (htmlString: string): string => {
    //     if (!htmlString) return "";
    //     let cleanText = htmlString.replace(/<[^>]*>/g, "").trim();
    //     if (cleanText && !cleanText.startsWith("/")) {
    //         cleanText = "/" + cleanText;
    //     }
    //     return cleanText;
    // };

    const extractHref = (htmlString: string): string => {
    if (!htmlString) return "";
    let cleanText = htmlString.replace(/<[^>]*>/g, "").trim();
    if (!cleanText) return "";
    cleanText = cleanText.toLowerCase().replace(/\s+/g, "-");
    if (!cleanText.startsWith("/")) {
        cleanText = "/" + cleanText;
    }

    return cleanText;
};


    // console.log(navData, "NDNDNDNDNDNDN")
    // console.log(pathname.toLowerCase());
    // console.log(navData[0].title.toLowerCase().trim().replaceAll(" ", "-"));
    // console.log(pathname.toLowerCase()=== navData[0].title.toLowerCase().trim().replace(" ", "-"))

    return (
        <nav className="flex flex-col space-y-2 text-lg font-medium text-gray-800">
            {navData.map((item) => {
                let href = extractHref(item.shortDescription)
                // console.log(href, "HHHHHHHHHHHHH")
                if (!href) {
                    href = `/${item.title.toLowerCase().replace(/\s+/g, "-")}`;
                }

                const isActive = pathname
                    .toLowerCase()
                    .includes(item.title.toLowerCase().trim().replaceAll(" ", "-"));

                return (
                    <Link
                        key={item.id}
                        href={href}
                        className={`px-4 py-3 transition-colors ${isActive
                            ? "bg-[#fcb03c] text-black hover:bg-orange-600"
                            : "hover:bg-[#fcb03c]"
                            }`}
                    >
                        {item.title}
                    </Link>
                );
            })}
        </nav>
    );
}