"use client";

import Link from "next/link";
import * as React from "react";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { siteConfig } from "@/lib/config";
import { cn } from "@/lib/utils";
import { Icons } from "@/components/icons";
import { usePathname } from "next/navigation";

const headerLinks = [
  // {
  //   trigger: "Features",
  //   content: {
  //     main: {
  //       icon: <Icons.logo className="h-6 w-6" />,
  //       title: "AI-Powered Automation",
  //       description: "Streamline your workflow with intelligent automation.",
  //       href: "#",
  //     },
  //     items: [
  //       {
  //         href: "#",
  //         title: "Task Automation",
  //         description: "Automate repetitive tasks and save time.",
  //       },
  //       {
  //         href: "#",
  //         title: "Workflow Optimization",
  //         description: "Optimize your processes with AI-driven insights.",
  //       },
  //       {
  //         href: "#",
  //         title: "Intelligent Scheduling",
  //         description: "AI-powered scheduling for maximum efficiency.",
  //       },
  //     ],
  //   },
  // },
  // {
  //   trigger: "Solutions",
  //   content: {
  //     items: [
  //       {
  //         title: "For Small Businesses",
  //         href: "#",
  //         description: "Tailored automation solutions for growing companies.",
  //       },
  //       {
  //         title: "Enterprise",
  //         href: "#",
  //         description: "Scalable AI automation for large organizations.",
  //       },
  //       {
  //         title: "Developers",
  //         href: "#",
  //         description: "API access and integration tools for developers.",
  //       },
  //       {
  //         title: "Healthcare",
  //         href: "#",
  //         description: "Specialized automation for healthcare workflows.",
  //       },
  //       {
  //         title: "Finance",
  //         href: "#",
  //         description: "AI-driven process automation for financial services.",
  //       },
  //       {
  //         title: "Education",
  //         href: "#",
  //         description:
  //           "Streamline administrative tasks in educational institutions.",
  //       },
  //     ],
  //   },
  // },
  {
    href: "/explore",
    label: "Agents",
  },
  // {
  //   href: "/faq",
  //   label: "FAQ",
  // },
  // {
  //   href: "/docs",
  //   label: "Docs",
  // },
];

export default function NavigationMenuDemo() {
  const pathName = usePathname();

  return (
    <NavigationMenu>
      <NavigationMenuList>
        {headerLinks.map((item, index) => (
          <NavigationMenuItem key={index}>
            <Link
              // href={item.href || ""}
              href={index === 0 ? item.href : "/#"}
              target="_arya"
              legacyBehavior
              passHref
            >
              <NavigationMenuLink
                className={cn(
                  navigationMenuTriggerStyle(),
                  item.href === pathName && "underline"
                )}
              >
                {item.label}
              </NavigationMenuLink>
            </Link>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  );
}

const ListItem = React.forwardRef<
  React.ElementRef<"a">,
  React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
  return (
    <li>
      <NavigationMenuLink asChild>
        <a
          ref={ref}
          className={cn(
            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
            className
          )}
          {...props}
        >
          <div className="text-sm font-medium leading-none">{title}</div>
          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
            {children}
          </p>
        </a>
      </NavigationMenuLink>
    </li>
  );
});

ListItem.displayName = "ListItem";
