Bottom Nav

"use client";

import type { MouseEvent } from "react";
import { useState } from "react";
import { Bell, Compass, Home, Search, User } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { BottomNav, BottomNavDot, BottomNavItem } from "@/components/ui/bottom-nav";

/**
 * Live Bottom Nav example. `"use client"` only so the demo can swallow real
 * navigation and drive which item is `current` — the parts themselves are
 * server components.
 *
 * Bottom Nav's real responsive contract is `fixed` to the actual browser
 * viewport and `md:hidden` (bottom-nav.md#responsive-contract) — the same
 * true-viewport-media-query approach Navbar and Sidebar Nav's own responsive
 * examples use, not a container query. To keep the live example visible
 * inside this docs page at every width instead of requiring an actual phone
 * or a resized browser, the preview frame below overrides those two classes
 * (`className="absolute md:flex"`, pinning the bar to the frame's own bottom
 * edge instead of the viewport's) — a demo-only override, spelled out below
 * the frame. Real usage leaves both alone.
 *
 * "Alerts" and "Profile" demonstrate the two supported `badge` treatments
 * (bottom-nav.md#variants): a count `Badge`, and the plain-dot
 * `BottomNavDot` for "new activity" with no number — paired with
 * visually-hidden text since a bare dot carries no accessible name on its
 * own.
 */
const ITEMS = [
  { href: "/home", label: "Home", icon: <Home /> },
  { href: "/explore", label: "Explore", icon: <Compass /> },
  { href: "/search", label: "Search", icon: <Search /> },
  {
    href: "/alerts",
    label: "Alerts",
    icon: <Bell />,
    badge: <Badge variant="destructive">3</Badge>,
  },
  {
    href: "/profile",
    label: "Profile",
    icon: <User />,
    badge: (
      <>
        <BottomNavDot />
        <span className="sr-only">New activity</span>
      </>
    ),
  },
];

const stayOnPage = (event: MouseEvent<HTMLAnchorElement>) =>
  event.preventDefault();

export function BottomNavShowcase() {
  const [current, setCurrent] = useState(ITEMS[0].href);

  return (
    <div className="flex flex-col gap-3">
      <div className="relative mx-auto h-80 w-full max-w-xs overflow-hidden rounded-md border border-solid border-border bg-background">
        <div className="flex h-full flex-col gap-2 overflow-y-auto p-4 pb-20">
          <p className="text-sm font-medium leading-snug">Page content</p>
          <p className="text-xs leading-snug text-muted-foreground">
            Scrolls independently behind the bar. Give a real page’s
            scrollable region bottom padding at least the bar’s height (plus
            the safe-area inset) so content never ends up hidden underneath
            it.
          </p>
        </div>

        <BottomNav className="absolute md:flex">
          {ITEMS.map((item) => (
            <BottomNavItem
              key={item.href}
              href={item.href}
              icon={item.icon}
              label={item.label}
              badge={item.badge}
              current={item.href === current}
              onClick={(event) => {
                stayOnPage(event);
                setCurrent(item.href);
              }}
            />
          ))}
        </BottomNav>
      </div>
      <p className="text-xs leading-snug text-muted-foreground">
        This demo frame overrides Bottom Nav’s real fixed-position and
        md:hidden classes so it stays pinned inside the box at every viewport
        width — in real usage leave both alone; the bar is fixed to the
        actual viewport and hidden at the md breakpoint (768px) and up.
        “Alerts” shows the optional badge slot holding a real Badge component
        for a count; “Profile” shows the same slot holding BottomNavDot, the
        plain no-count indicator (paired here with visually-hidden “New
        activity” text). Both are caller-supplied nodes, not a built-in
        count/notification system.
      </p>
    </div>
  );
}