"use client";

import { cn } from "@area/foundation";
import { type LucideIcon } from "lucide-react";
import { type ReactNode } from "react";

export interface BottomNavItem {
  /** Used for keyed render + as the active comparator value. */
  key: string;
  /** Label shown under the icon. */
  label: string;
  /** Lucide icon component. */
  icon: LucideIcon;
  /** Optional badge count (renders a dot if 0 < count < 99). */
  badge?: number;
}

interface BottomNavProps {
  items: BottomNavItem[];
  active: string;
  onChange: (key: string) => void;
  className?: string;
  children?: ReactNode;
}

/**
 * Bottom tab bar nav. Five items max recommended (Apple HIG / Material). Honors safe-area-inset-bottom.
 */
export function BottomNav({ items, active, onChange, className, children }: BottomNavProps) {
  return (
    <nav
      role="tablist"
      aria-label="Primary"
      className={cn(
        "fixed inset-x-0 bottom-0 z-40 flex h-16 items-stretch border-t border-border bg-background/95 pb-safe backdrop-blur",
        className,
      )}
    >
      {items.map((item) => {
        const isActive = item.key === active;
        const Icon = item.icon;
        return (
          <button
            key={item.key}
            role="tab"
            aria-selected={isActive}
            aria-label={item.label}
            onClick={() => onChange(item.key)}
            className={cn(
              "flex flex-1 flex-col items-center justify-center gap-1 text-xs",
              isActive ? "text-foreground" : "text-muted-foreground",
            )}
          >
            <span className="relative">
              <Icon className="size-5" aria-hidden />
              {item.badge !== undefined && item.badge > 0 && (
                <span className="absolute -right-1.5 -top-0.5 inline-flex min-w-4 items-center justify-center rounded-full bg-accent px-1 text-[10px] font-medium text-background">
                  {item.badge > 99 ? "99+" : item.badge}
                </span>
              )}
            </span>
            <span>{item.label}</span>
          </button>
        );
      })}
      {children}
    </nav>
  );
}