import React from "react";

const TABS = ["main", "classes", "spells", "manage"] as const;
const TAB_LABELS = ["Character", "Classes", "Arcana & Spells", "Manage"];

interface HeaderProps {
  activeTab: string;
  setActiveTab: (tab: string) => void;
  theme: string;
  setTheme: React.Dispatch<React.SetStateAction<string>>;
  saveStatus: boolean;
}

export default function Header({
  activeTab,
  setActiveTab,
  theme,
  setTheme,
  saveStatus,
}: HeaderProps) {
  return (
    <header>
      <div className="logo">Fabula Ultima</div>
      <div className="tabs">
        {TABS.map((tab, i) => (
          <button
            type="button"
            key={tab}
            className={`tab${activeTab === tab ? " active" : ""}`}
            onClick={() => setActiveTab(tab)}
          >
            {TAB_LABELS[i]}
          </button>
        ))}
      </div>
      <div className="toolbar">
        <span className={`save-status${saveStatus ? " show" : ""}`}>Saved!</span>
        <button type="button" className="btn-print" onClick={() => window.print()}>
          ⎙ Print
        </button>
        <button
          type="button"
          className="btn-theme"
          onClick={() => setTheme((t) => (t === "light" ? "dark" : "light"))}
        >
          {theme === "light" ? "☾ Dark" : "☀ Light"}
        </button>
      </div>
    </header>
  );
}
