"use client";

import { Camera, Menu as MenuIcon, MessageCircle } from "lucide-react";

import styles from "./app-bottom-nav.module.css";

export type AppBottomNavItem = "chat" | "privateZone" | "menu";
export type AppBottomNavVariant = "warm" | "dark";

export interface AppBottomNavProps {
  activeItem?: AppBottomNavItem | null;
  variant?: AppBottomNavVariant;
  privateZoneLabel: string;
  onChatClick: () => void;
  onPrivateZoneClick: () => void;
  onMenuClick: () => void;
}

export function AppBottomNav({
  activeItem = null,
  variant = "warm",
  privateZoneLabel,
  onChatClick,
  onPrivateZoneClick,
  onMenuClick,
}: AppBottomNavProps) {
  return (
    <nav className={getRootClass(variant)} aria-label="Primary navigation">
      <button
        type="button"
        data-analytics-key="navigation.chat"
        data-analytics-label="Chat navigation"
        className={getButtonClass(activeItem === "chat")}
        aria-current={activeItem === "chat" ? "page" : undefined}
        onClick={onChatClick}
      >
        <MessageCircle size={20} aria-hidden="true" />
        <span>Chat</span>
      </button>
      <button
        type="button"
        data-analytics-key="navigation.private_zone"
        data-analytics-label="Private Zone navigation"
        className={getButtonClass(activeItem === "privateZone")}
        aria-current={activeItem === "privateZone" ? "page" : undefined}
        onClick={onPrivateZoneClick}
      >
        <Camera size={20} aria-hidden="true" />
        <span>{privateZoneLabel}</span>
      </button>
      <button
        type="button"
        data-analytics-key="navigation.menu"
        data-analytics-label="Menu navigation"
        className={getButtonClass(activeItem === "menu")}
        aria-current={activeItem === "menu" ? "page" : undefined}
        onClick={onMenuClick}
      >
        <MenuIcon size={20} aria-hidden="true" />
        <span>Menu</span>
      </button>
    </nav>
  );
}

function getRootClass(variant: AppBottomNavVariant): string {
  return [styles.root, styles[variant]].filter(Boolean).join(" ");
}

function getButtonClass(active: boolean): string {
  return [styles.button, active ? styles.active : ""].filter(Boolean).join(" ");
}