Navigation Menu

'use client'

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTopLink,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'

export default function NavigationMenuBasic() {
  return (
    <NavigationMenu aria-label="Product">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="#invoicing" description="Send and track invoices">
              Invoicing
            </NavigationMenuLink>
            <NavigationMenuLink href="#payments" description="Cards, bank transfers, payouts">
              Payments
            </NavigationMenuLink>
            <NavigationMenuLink href="#reports" description="Revenue and tax reports">
              Reports
            </NavigationMenuLink>
            <NavigationMenuLink href="#integrations" description="Accounting and CRM apps">
              Integrations
            </NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTopLink href="#pricing">Pricing</NavigationMenuTopLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}