import { LayoutPanelTop, Palette, Rows3, Trash2 } from "lucide-react";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

export type MenuBoardModuleView = "menus" | "design" | "templates" | "trash";

type Props = {
  activeView: MenuBoardModuleView;
  trashCount: number;
  onViewChange: (view: MenuBoardModuleView) => void;
};

const items: Array<{ id: MenuBoardModuleView; label: "menus" | "design" | "templates" | "trash"; icon: typeof Rows3 }> = [
  { id: "menus", label: "menus", icon: Rows3 },
  { id: "design", label: "design", icon: Palette },
  { id: "templates", label: "templates", icon: LayoutPanelTop },
  { id: "trash", label: "trash", icon: Trash2 },
];

export default function MenuBoardModuleNav({ activeView, trashCount, onViewChange }: Props) {
  const t = useMenuBoardText();
  return (
    <nav aria-label={t("menuBoards")} className="bg-[var(--bg-elevated)]/20">
      <div className="flex min-h-16 items-center justify-start overflow-x-auto px-3 py-2 sm:px-5">
        <div className="inline-flex min-w-max items-center gap-1 rounded-xl bg-[var(--bg)]/55 p-1">
          {items.map((item) => {
            const Icon = item.icon;
            const active = activeView === item.id;
            return (
              <button
                key={item.id}
                type="button"
                aria-current={active ? "page" : undefined}
                onClick={() => onViewChange(item.id)}
                className={`inline-flex h-9 shrink-0 items-center gap-2 rounded-lg px-3.5 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/30 ${active ? "bg-[var(--accent)]/15 text-[var(--text)]" : "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"}`}
              >
                <Icon className={`h-4 w-4 ${active ? "text-[var(--accent)]" : ""}`} />
                {t(item.label)}
                {item.id === "trash" && trashCount > 0 && <span className={`rounded-full px-1.5 py-0.5 text-[10px] leading-none ${active ? "bg-[var(--accent)] text-[var(--accent-fg)]" : "bg-[var(--bg-hover)] text-[var(--text-faint)]"}`}>{trashCount}</span>}
              </button>
            );
          })}
        </div>
      </div>
    </nav>
  );
}