deckhearth/components/DeckBuilderStatsBar.js

/**
 * Summary metrics row for the deck builder main panel.
 * @param {{ stats: { totalCards: number, avgCmc: string|number, colorCounts: object, typeCounts: object } }} props
 */
export default function DeckBuilderStatsBar({ stats }) {
  return (
    <div
      className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 p-4 rounded-xl"
      style={{ backgroundColor: 'var(--bg-primary)' }}
    >
      <div className="text-center">
        <div className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
          {stats.totalCards}/100
        </div>
        <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
          Cards
        </div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
          {stats.avgCmc}
        </div>
        <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
          Avg CMC
        </div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
          {Object.keys(stats.colorCounts).length}
        </div>
        <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
          Colors
        </div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold" style={{ color: 'var(--text-primary)' }}>
          {Object.keys(stats.typeCounts).length}
        </div>
        <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
          Types
        </div>
      </div>
    </div>
  );
}