import { useNavigate } from "react-router";
import { rememberScreen, SCREEN_LABELS, type Screen } from "../auth/roles";

interface RoleSwitcherProps {
  screens: readonly Screen[];
  active: Screen | null;
}

/** One button per screen the user has. Drawn only when there is more than one. The pick is remembered for the next landing. */
export function RoleSwitcher({ screens, active }: RoleSwitcherProps) {
  const navigate = useNavigate();
  if (screens.length < 2) return null;
  return (
    <nav className="roles" aria-label="Screens">
      {screens.map((s) => (
        <button
          key={s}
          type="button"
          aria-pressed={active === s}
          onClick={() => {
            rememberScreen(s);
            navigate(`/${s}`);
          }}
        >
          {SCREEN_LABELS[s]}
        </button>
      ))}
    </nav>
  );
}