import type { Stats } from '../types';

type StatsPanelProps = {
  stats: Stats;
  level: number;
};

export function StatsPanel({ stats, level }: StatsPanelProps) {
  const items = [
    ['Played', stats.gamesPlayed],
    ['Wins', stats.wins],
    ['Losses', stats.losses],
    ['Streak', stats.currentStreak],
    ['Best', stats.bestStreak],
    ['Level', level],
  ];

  return (
    <div className="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
      <h2 className="text-sm font-black uppercase tracking-[0.2em] text-slate-300">Stats</h2>
      <div className="mt-4 grid grid-cols-3 gap-2">
        {items.map(([label, value]) => (
          <div className="rounded-md border border-slate-800 bg-slate-900/80 p-2 text-center" key={label}>
            <div className="text-lg font-black text-slate-100">{value}</div>
            <div className="text-[0.65rem] font-bold uppercase text-slate-500">{label}</div>
          </div>
        ))}
      </div>
      <div className="mt-3 rounded-md bg-slate-900/70 px-3 py-2 text-xs text-slate-400">
        Infinite: {stats.infiniteWins} wins, {stats.infiniteLosses} losses
      </div>
    </div>
  );
}
