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 bg-bg-primary rounded-lg">
      <div className="text-center">
        <div className="text-lg font-bold text-text-primary">{stats.totalCards}/100</div>
        <div className="text-text-secondary text-sm">Cards</div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold text-text-primary">{stats.avgCmc}</div>
        <div className="text-text-secondary text-sm">Avg CMC</div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold text-text-primary">
          {Object.keys(stats.colorCounts).length}
        </div>
        <div className="text-text-secondary text-sm">Colors</div>
      </div>
      <div className="text-center">
        <div className="text-lg font-bold text-text-primary">
          {Object.keys(stats.typeCounts).length}
        </div>
        <div className="text-text-secondary text-sm">Types</div>
      </div>
    </div>
  );
}