import * as React from "react"
import { PeriodLink } from "@/registry/ui/period-link"

const links = [
  { href: "/dashboard", label: "Dashboard" },
  { href: "/trends", label: "Trends" },
  { href: "/breakdown", label: "Breakdown" },
]

export default function PeriodLinkDemo() {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-xs text-muted-foreground">
        Each link preserves the current ?p= period across navigation.
      </p>
      <React.Suspense fallback={null}>
        <nav className="flex items-center gap-6 text-sm">
          {links.map((l) => (
            <PeriodLink
              key={l.href}
              href={l.href}
              className="text-muted-foreground transition-colors hover:text-foreground"
            >
              {l.label}
            </PeriodLink>
          ))}
        </nav>
      </React.Suspense>
    </div>
  )
}