import { Icons } from "@/components/icons";
import { Button, buttonVariants } from "@/components/ui/button";
import {
  Drawer,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { siteConfig } from "@/lib/config";
import { cn } from "@/lib/utils";
import { LoginModalOptions } from "@privy-io/react-auth";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";
import { IoMenuSharp } from "react-icons/io5";

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 DrawerDemo({
  login,
}: {
  login: (options?: LoginModalOptions | React.MouseEvent<any, any>) => void;
}) {
  const pathName = usePathname();

  const [open, setOpen] = React.useState(false);

  return (
    <Drawer open={open} onOpenChange={(val) => setOpen(val)}>
      <DrawerTrigger>
        <IoMenuSharp className="text-2xl" />
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader className="px-6">
          <div className="">
            <Link
              href="/"
              title="brand-logo"
              className="grow relative flex items-center space-x-2"
            >
              <Image
                src="/logo.png"
                height={44}
                width={44}
                alt="logo"
                className="rounded-md shadow"
              />
              <span className="font-bold text-xl">{siteConfig.name}</span>
            </Link>
          </div>
          <nav>
            <ul className="mt-7 text-left">
              {headerLinks.map((item, index) => (
                <li key={index} className="my-3">
                  <Link
                    href={index === 0 ? item.href : "/#"}
                    className={cn(
                      "font-semibold",
                      item.href === pathName && "underline"
                    )}
                    onClick={() => setOpen(false)}
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </DrawerHeader>
        <DrawerFooter>
          <Button
            onClick={login}
            className={buttonVariants({ variant: "default" })}
          >
            Connect Wallet
          </Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
