import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "./navigation-menu";

export default function NavigationMenuDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid gap-3 p-4 w-[300px]">
                <li>
                  <NavigationMenuLink
                    href="#"
                    className="block rounded-base p-3 font-base text-sm hover:bg-main hover:text-main-foreground"
                  >
                    Introduction
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink
                    href="#"
                    className="block rounded-base p-3 font-base text-sm hover:bg-main hover:text-main-foreground"
                  >
                    Installation
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink
              href="#"
              className="inline-flex items-center justify-center px-4 py-2 text-sm font-base"
            >
              Components
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  );
}