"use client";

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

import { cn } from "@/lib/utils";
import { Icons } from "@/components/icons";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import ThemeToggle from "./layout/ThemeToggle/theme-toggle";
import { buttonVariants } from "./ui/button";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { AlignRight } from "lucide-react";
import { NavItem } from "@/types";
import { MobileNav } from "./mobile-nav";

const careerPaths: { title: string; href: string; description: string }[] = [
  {
    title: "Frontend Developer",
    href: "#",
    description:
      "Master frontend technologies like HTML, CSS, and JavaScript to build dynamic and user-friendly web interfaces.",
  },
  {
    title: "Backend Developer",
    href: "#",
    description:
      "Learn server-side programming languages and frameworks to create scalable and efficient web applications.",
  },
  {
    title: "Full Stack Developer",
    href: "#",
    description:
      "Combine frontend and backend development skills to build end-to-end web applications from scratch.",
  },
  {
    title: "Mobile App Developer",
    href: "#",
    description:
      "Specialize in mobile app development for iOS or Android platforms using Swift, Kotlin, or cross-platform frameworks.",
  },
  {
    title: "Game Developer",
    href: "#",
    description:
      "Dive into game development with Unity or Unreal Engine, creating immersive gaming experiences for various platforms.",
  },
  {
    title: "Machine Learning Engineer",
    href: "#",
    description:
      "Develop machine learning models and algorithms to solve complex problems and make predictions based on data.",
  },
];



export default function Navbar() {
  return (
    <header className="border-b py-3">
      <div className="max-w-7xl mx-auto flex justify-between items-center px-4">
        <Link href="/" className="inline-block w-fit">
          <h2 className="text-xl font-bold">Skilld</h2>
        </Link>

        <div className="hidden md:flex gap-8 items-center">
          <NavigationMenu>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Courses</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                    <li className="row-span-3">
                      <NavigationMenuLink asChild>
                        <a
                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                          href="/"
                        >
                          <Icons.logo className="h-6 w-6" />
                          <div className="mb-2 mt-4 text-lg font-medium">
                            Skilld
                          </div>
                          <p className="text-sm leading-tight text-muted-foreground">
                            Browse our extensive catalog of courses covering a
                            wide range of topics in software engineering, from
                            programming languages to advanced technologies.
                          </p>
                        </a>
                      </NavigationMenuLink>
                    </li>
                    <ListItem href="#" title="Python Programming">
                      Learn the fundamentals of Python programming language,
                      from basic syntax to advanced concepts like
                      object-oriented programming.
                    </ListItem>
                    <ListItem href="#" title="Web Development with React.js:">
                      Master frontend web development using React.js library,
                      including state management, component-based architecture,
                      and modern UI design techniques.
                    </ListItem>
                    <ListItem href="#" title="Machine Learning Fundamentals">
                      Dive into the world of machine learning, covering topics
                      such as supervised and unsupervised learning, neural
                      networks, and model evaluation.
                    </ListItem>
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Career Paths</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
                    {careerPaths.map((path) => (
                      <ListItem
                        key={path.title}
                        title={path.title}
                        href={path.href}
                      >
                        {path.description}
                      </ListItem>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <Link href="#" legacyBehavior passHref>
                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                    Community
                  </NavigationMenuLink>
                </Link>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <Link href="/pricing" legacyBehavior passHref>
                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                    Pricing
                  </NavigationMenuLink>
                </Link>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>

          <Link className={buttonVariants({ variant: "secondary" })} href="/">
            Sign In
          </Link>
          <ThemeToggle />
        </div>

        <div className="md:hidden">
          <MobileNav/>
          {/* <Sheet>
            <SheetTrigger>
              <AlignRight />
            </SheetTrigger>
            <SheetContent>
              <SheetHeader>
                <SheetTitle>Skilld</SheetTitle>
              </SheetHeader>
              <div>

              </div>
            </SheetContent>
          </Sheet> */}
        </div>
      </div>
    </header>
  );
}

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";