"use client";

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

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

export type AppBottomNavItem = "chat" | "privateRoom";
export type AppBottomNavVariant = "warm" | "dark";

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

export function AppBottomNav({
  activeItem = null,
  variant = "warm",
  privateRoomLabel = "Elio Private room",
  onChatClick,
  onPrivateRoomClick,
}: 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_room"
        data-analytics-label="Private room navigation"
        className={getButtonClass(activeItem === "privateRoom")}
        aria-current={activeItem === "privateRoom" ? "page" : undefined}
        onClick={onPrivateRoomClick}
      >
        <Camera size={20} aria-hidden="true" />
        <span>{privateRoomLabel}</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(" ");
}
