ScoreBoard

<ScoreBoard scores={defaultHighScores.scores} />

import { cn } from '@/lib/utils'
import type { ScoreEntry } from '@/types'

interface ScoreBoardProps {
  scores: ScoreEntry[]
  className?: string
}

const RANK_CLASSES: Record<number, string> = {
  1: 'rank-1',
  2: 'rank-2',
  3: 'rank-3',
}

function formatScore(score: number): string {
  return score.toLocaleString()
}

export function ScoreBoard({ scores, className }: ScoreBoardProps): React.JSX.Element {
  return (
    <div className={cn('bg-retro-deep border-2 border-retro-green-dim max-w-[900px] mx-auto relative pt-6', className)}>

      <div className="scores-board-label">HIGH SCORES</div>

      {/* Desktop table */}
      <table className="scores-table">
        <thead>
          <tr>
            <th>RANK</th>
            <th>PLAYER</th>
            <th>STAGE</th>
            <th>SCORE</th>
            <th>DATE</th>
          </tr>
        </thead>
        <tbody>
          {scores.map((entry) => (
            <tr
              key={entry.rank}
              className={cn(RANK_CLASSES[entry.rank])}
            >
              <td>{String(entry.rank).padStart(2, '0')}</td>
              <td>
                {entry.player}
                {entry.isNew && <span className="new-tag">NEW</span>}
              </td>
              <td>{entry.stage}</td>
              <td className="score-num">{formatScore(entry.score)}</td>
              <td>{entry.date}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Mobile cards */}
      <div className="scores-cards">
        {scores.map((entry) => (
            <div key={entry.rank} className="score-card">
              <div className={cn('score-card-rank', RANK_CLASSES[entry.rank])}>
                #{String(entry.rank).padStart(2, '0')}
              </div>
              <div className="score-card-player">
                {entry.player}
                {entry.isNew && <span className="new-tag">NEW</span>}
              </div>
              <div className="score-card-score">{formatScore(entry.score)}</div>
              <div className="score-card-meta">
                <div className="score-card-meta-item">
                  <span className="score-card-meta-label">STAGE</span>
                  <span className="score-card-meta-val">{entry.stage}</span>
                </div>
                <div className="score-card-meta-item">
                  <span className="score-card-meta-label">DATE</span>
                  <span className="score-card-meta-val">{entry.date}</span>
                </div>
              </div>
            </div>
        ))}
      </div>
    </div>
  )
}