import * as React from 'react';
import { cn } from '@/lib/utils';
import {} from 'lucide-react';
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
// import { HashLink } from 'react-router-hash-link';

export default function NavBar({ mobile = false }: { mobile?: boolean }) {
  return (
    <NavigationMenu className={mobile ? 'lg:hidden max-h-max pt-8 px-4' : ''}>
      <NavigationMenuList className={mobile ? 'flex flex-col items-start' : ''}>
        <NavigationMenuItem>
          <NavigationMenuLink href="/" className={navigationMenuTriggerStyle()}>
            Home
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="https://marketplace.snai3i.org/"
            className={navigationMenuTriggerStyle()}
            target="_blank"
          >
            Market
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="/storm"
            className={navigationMenuTriggerStyle()}
          >
            Storm
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="/spark"
            className={navigationMenuTriggerStyle()}
          >
            Spark
          </NavigationMenuLink>
        </NavigationMenuItem>
        {/* <NavigationMenuItem>
          <div className={navigationMenuTriggerStyle() + ' cursor-pointer'}>
            <HashLink to="/#services">Services</HashLink>
          </div>
        </NavigationMenuItem> */}

        {/* <NavigationMenuItem className="shadow-none border-none">
          <NavigationMenuTrigger>Programs</NavigationMenuTrigger>
          <NavigationMenuContent className="bg-primary-foreground">
            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem> */}
        {mobile && (
          <NavigationMenuItem className="py-3 pl-3">
            <NavigationMenuLink
              href="https://platform.snai3i.org/student/login"
              className={
                'bg-primary text-white shadow hover:bg-primary/90  py-2 px-8 rounded-full cursor-pointer'
              }
              target='_blank'
            >
              Login
            </NavigationMenuLink>
          </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(
            // 'group inline-flex h-9 w-max items-center rounded-full justify-center bg-primary-forground px-4 py-2  font-medium transition-colors hover:text-accent-foreground focus:bg-primary-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-primary-foreground/50 data-[state=open]:bg-primary-foreground/50'
            'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-primary/5 hover:text-accent-foreground focus:bg-primary-foreground/50 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';