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

export function SliceEventLog({ session }: { session: GameSliceSession }) {
  return (
    <section style={{ ...slicePanel, padding: 12, minHeight: 236 }}>
      <strong style={{ color: "#22d3ee", fontSize: 12 }}>Event Log</strong>
      <div style={{ display: "grid", gridTemplateRows: "repeat(8, 22px)", gap: 4, marginTop: 10, overflow: "hidden" }}>
        {Array.from({ length: 8 }).map((_, index) => {
          const entry = session.eventLog[index];
          return (
            <div key={entry?.id ?? index} style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: entry ? "#d4dce8" : "#475569", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
              {entry ? `${new Date(entry.at).toLocaleTimeString("en", { hour12: false })} ${entry.message}` : "No event"}
            </div>
          );
        })}
      </div>
    </section>
  );
}
