import { NavLink } from "react-router";
import { useLoadedPlayer } from "../state/actions";

/** Fleet's two views, Ships and Crew (decision 0.5.167). */
export function FleetViews() {
  const state = useLoadedPlayer();
  const views = [
    { to: "/fleet", label: `Ships ${state.ships.length}` },
    { to: "/pilots", label: `Crew ${state.pilots.length}` },
  ];
  return (
    <nav
      aria-label="Fleet views"
      className="flex gap-0.5 rounded-xl border border-glass-line bg-black/25 p-0.5"
    >
      {views.map((view) => (
        <NavLink
          key={view.to}
          to={view.to}
          className={({ isActive }) =>
            `flex min-h-11 flex-1 items-center justify-center rounded-[0.6rem] text-sm font-medium ${
              isActive ? "bg-white/14 text-ink-50" : "text-ink-300 hover:text-ink-50"
            }`
          }
        >
          {view.label}
        </NavLink>
      ))}
    </nav>
  );
}