import { formatBytes, formatDuration } from "@/lib/format";
import { KEY_BINDINGS } from "@/lib/pinball/keyBindings";
import type { TableInfo } from "@/lib/pinball/types";

export interface GameInfoPanelProps {
  tableInfo: TableInfo;
  loadTimeMs: number | null;
}

export default function GameInfoPanel({ tableInfo, loadTimeMs }: GameInfoPanelProps) {
  return (
    <div className="w-72 space-y-4 rounded border border-chrome/30 bg-ash/95 p-4 font-mono text-sm text-paper shadow-xl">
      <div>
        <div className="text-xs tracking-widest text-chrome">TABLE</div>
        <div className="truncate text-arc">{tableInfo.name}</div>
      </div>
      <dl className="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
        <dt className="text-chrome">Source</dt>
        <dd>{tableInfo.isDemo ? "Bundled demo" : "Your upload"}</dd>
        <dt className="text-chrome">Size</dt>
        <dd>{tableInfo.isDemo ? "—" : formatBytes(tableInfo.sizeBytes)}</dd>
        <dt className="text-chrome">Load time</dt>
        <dd>{loadTimeMs !== null ? formatDuration(loadTimeMs) : "—"}</dd>
      </dl>
      <div>
        <div className="mb-1 text-xs tracking-widest text-chrome">CONTROLS</div>
        <ul className="space-y-1 text-xs">
          {KEY_BINDINGS.map((binding) => (
            <li key={binding.action} className="flex justify-between gap-2">
              <span className="text-chrome">{binding.action}</span>
              <span className="text-paper">{binding.keys}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}