import type { GameSliceSession } from "../types";
import { getCargoUsed } from "../sliceEconomy";
import { metricLabel, slicePanel } from "./sliceStyles";

export function SliceCargoPanel({ session }: { session: GameSliceSession }) {
  const cargoUsed = getCargoUsed(session);
  return (
    <section style={{ ...slicePanel, padding: 12, minHeight: 180 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
        <strong style={{ color: "#f0a030", fontSize: 12 }}>Cargo</strong>
        <span style={metricLabel}>{cargoUsed}/{session.cargoCapacity}</span>
      </div>
      <div style={{ display: "grid", gridTemplateRows: "repeat(5, 24px)", gap: 4 }}>
        {Array.from({ length: 5 }).map((_, index) => {
          const item = session.cargo[index];
          return (
            <div key={index} style={{ display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", borderBottom: "1px solid rgba(255,255,255,0.05)", fontSize: 11 }}>
              <span style={{ color: item ? "#d4dce8" : "#475569" }}>{item?.item ?? "Empty"}</span>
              <span style={{ color: item ? "#22c55e" : "#475569", fontFamily: "var(--font-mono)" }}>{item?.quantity.toLocaleString() ?? "-"}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}
