import { withGameSliceSession } from "../gameSliceState";
import type { GameSliceSession } from "../types";
import { sliceButton, slicePanel } from "./sliceStyles";

const links = [
  ["/docs/demos/game-loop", "Loop"],
  ["/docs/demos/starmap", "Star Map"],
  ["/docs/demos/movement", "Movement"],
  ["/docs/demos/warp", "Warp"],
  ["/docs/demos/game-hud", "HUD"],
  ["/docs/demos/refining", "Refining"],
  ["/docs/demos/fitting", "Fitting"],
  ["/docs/demos/market", "Market"],
  ["/docs/demos/combat", "Combat"],
  ["/docs/demos/progression", "XP"],
  ["/docs/demos/bounty", "Bounty"],
  ["/docs/demos/chat", "Chat"],
  ["/docs/demos/zora", "Zora"],
];

export function SliceDemoLinks({ session, compact = false }: { session: GameSliceSession; compact?: boolean }) {
  return (
    <section style={{ ...slicePanel, padding: compact ? 8 : 12, minHeight: compact ? undefined : 118 }}>
      {!compact && <strong style={{ color: "#f0a030", fontSize: 12 }}>Connected Demos</strong>}
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: compact ? 0 : 10 }}>
        {links.map(([href, label]) => (
          <button key={href} style={{ ...sliceButton, padding: compact ? "4px 7px" : "6px 8px" }} onClick={() => { window.location.href = withGameSliceSession(href, session.id); }}>
            {label}
          </button>
        ))}
      </div>
    </section>
  );
}
