import type { GameSliceSession } from "../types";
import { slicePanel } from "./sliceStyles";

export function SliceModuleRack({ session }: { session: GameSliceSession }) {
  const modules = session.fittedModules.slice(0, 8);
  return (
    <div style={{ ...slicePanel, height: "100%", minHeight: 0, padding: 10, boxSizing: "border-box", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(88px, 1fr))", gap: 8, alignItems: "center", overflow: "auto" }}>
      {Array.from({ length: 8 }).map((_, index) => {
        const module = modules[index];
        return (
          <button key={module?.id ?? index} disabled={!module} style={{ height: "clamp(52px, 8dvh, 68px)", border: `1px solid ${module ? "rgba(34,211,238,0.42)" : "rgba(148,163,184,0.14)"}`, background: module ? "rgba(34,211,238,0.08)" : "rgba(15,23,42,0.35)", color: module ? "#d4dce8" : "#475569", borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 10, overflow: "hidden" }}>
            {module ? <><span>{module.name}</span><br /><small>{module.slot.toUpperCase()} · {module.active ? "ACTIVE" : "READY"}</small></> : "Empty"}
          </button>
        );
      })}
    </div>
  );
}
