Site Navigation

import { CircleIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { SiteNavigation } from "@/components/site-navigation/site-navigation"
import { buttonVariants } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"

const COPY = {
  brand: "Orbcore",
  home: "Orbcore home",
  login: "Log in",
  action: "Get started",
  links: [
    { label: "Product", href: "#product" },
    { label: "Solutions", href: "#solutions" },
    { label: "Resources", href: "#resources" },
    { label: "Pricing", href: "#pricing" },
  ],
  layouts: [
    { variant: "left", label: "Left aligned links" },
    { variant: "centered-links", label: "Centered links" },
    { variant: "centered-logo", label: "Centered logo" },
  ],
} as const

export default function SiteNavigationDemo() {
  return (
    <div className="grid min-h-full w-full min-w-0 flex-1 gap-8 py-8 sm:px-6">
      {COPY.layouts.map(({ variant, label }, index) => (
        <section key={variant} className="flex w-full min-w-0 flex-col gap-3">
          <div className="mx-auto w-full max-w-2xl px-6 md:max-w-3xl lg:max-w-7xl lg:px-10">
            <h2 className="text-sm font-medium text-muted-foreground">
              {label}
            </h2>
          </div>
          <SiteNavigation
            variant={variant}
            brand={{
              href: "#",
              "aria-label": COPY.home,
              label: (
                <>
                  <CircleIcon
                    weight="light"
                    aria-hidden="true"
                    className="size-5 shrink-0"
                  />
                  {COPY.brand}
                </>
              ),
            }}
            links={COPY.links}
            action={{
              label: COPY.action,
              href: "#",
              className: cn(
                buttonVariants(),
                "hover:text-primary-foreground dark:bg-primary dark:hover:bg-primary/80"
              ),
            }}
            secondaryAction={{ label: COPY.login, href: "#" }}
          />
          {index < COPY.layouts.length - 1 && <Separator />}
        </section>
      ))}
    </div>
  )
}