import styles from "../styles/tabs.module.css";
import { useStore } from "../store/root";
import HelpButton from "./helpButton";

const Tabs = () => {
  const setActiveTab = useStore((state) => state.setActiveTab);
  const activeTab = useStore((state) => state.activeTab);
  const tasksCount = useStore((state) => state.queueTasks.length);

  return (
    <div className={styles.tabsContainer}>
      <div className={styles.tabs}>
        <button
          className={`${styles.tab} ${activeTab === "optimization" ? styles.active : ""}`}
          onClick={() => setActiveTab("optimization")}
        >
          Optimization
        </button>
        <span className={styles.splitter}></span>
        <button
          className={`${styles.tab} ${activeTab === "tasks" ? styles.active : ""}`}
          onClick={() => setActiveTab("tasks")}
        >
          <span className={styles.tabText}>
            Tasks
            {tasksCount > 0 && (
              <span className={styles.badge}>{tasksCount}</span>
            )}
          </span>
        </button>
      </div>
      <HelpButton />
    </div>
  );
};

export default Tabs;
