import { ActiveTab } from "../types";
import styles from "./TabHeaders.module.css";

type TabHeadersProps = {
  activeTab: ActiveTab;
  isLicensed: boolean;
  onTabChange: (tab: ActiveTab) => void;
};

export function TabHeaders({
  activeTab,
  isLicensed,
  onTabChange,
}: TabHeadersProps) {
  return (
    <div className={styles["tab-headers"]} role="tablist">
      <button
        role="tab"
        aria-selected={activeTab === "general"}
        className={`${styles["tab-btn"]} ${activeTab === "general" ? styles.active : ""}`}
        onClick={() => onTabChange("general")}
        disabled={!isLicensed}
      >
        General
      </button>
      <button
        role="tab"
        aria-selected={activeTab === "rules"}
        className={`${styles["tab-btn"]} ${activeTab === "rules" ? styles.active : ""}`}
        onClick={() => onTabChange("rules")}
        disabled={!isLicensed}
      >
        Rules
      </button>
      <button
        role="tab"
        aria-selected={activeTab === "license"}
        className={`${styles["tab-btn"]} ${activeTab === "license" ? styles.active : ""}`}
        onClick={() => onTabChange("license")}
      >
        License{!isLicensed && " ⚠️"}
      </button>
    </div>
  );
}
