"use client";

/**
 * Mode Switcher
 * Simple reusable mode switcher for switching between DocDoe modes
 */

import { useDocDoeMode } from "../mode-selection/useDocDoeMode";
import type { DocDoeMode } from "./modeStorage";

interface ModeSwitcherProps {
  className?: string;
}

export function ModeSwitcher({ className = "" }: ModeSwitcherProps) {
  const { mode, switchMode } = useDocDoeMode();
  const modes: Array<{ mode: DocDoeMode; label: string; aria: string }> = [
    { mode: "tuition", label: "Today's Tuition", aria: "Switch to Today's Tuition" },
    { mode: "study-chat", label: "Study Chat", aria: "Switch to Study Chat" },
    { mode: "learn-anything", label: "Learn Anything", aria: "Switch to Learn Anything" },
  ];

  return (
    <div className={`flex flex-wrap items-center gap-2 ${className}`}>
      {modes.map((item) => (
        <button
          key={item.mode}
          type="button"
          onClick={() => switchMode(item.mode)}
          className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
            mode === item.mode
              ? "bg-white/10 text-white"
              : "text-white/60 hover:bg-white/5 hover:text-white"
          }`}
          aria-label={item.aria}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}