deckhearth/components/DeckDetailStatsSidebar.js

const GROUP_OPTIONS = [
  { value: 'type', label: 'Card Type' },
  { value: 'cmc', label: 'Mana Cost' },
  { value: 'color', label: 'Color' },
  { value: 'rarity', label: 'Rarity' },
];

export default function DeckDetailStatsSidebar({ deck, stats, groupBy, onGroupByChange }) {
  return (
    <div className="lg:col-span-1">
      <div className="glass-panel rounded-2xl p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
          Statistics
        </h3>

        <div className="space-y-3">
          <div className="flex justify-between">
            <span style={{ color: 'var(--text-secondary)' }}>Total Cards:</span>
            <span className="font-medium" style={{ color: 'var(--text-primary)' }}>
              {stats.totalCards}
            </span>
          </div>
          <div className="flex justify-between">
            <span style={{ color: 'var(--text-secondary)' }}>Avg. CMC:</span>
            <span className="font-medium" style={{ color: 'var(--text-primary)' }}>
              {stats.avgCmc}
            </span>
          </div>
          <div className="flex justify-between">
            <span style={{ color: 'var(--text-secondary)' }}>Format:</span>
            <span className="font-medium" style={{ color: 'var(--text-primary)' }}>
              {deck.format}
            </span>
          </div>
        </div>

        {Object.keys(stats.colorCounts).length > 0 && (
          <div className="mt-6">
            <h4 className="text-sm font-medium mb-3" style={{ color: 'var(--text-secondary)' }}>
              Color Distribution
            </h4>
            <div className="space-y-2">
              {Object.entries(stats.colorCounts)
                .sort(([, a], [, b]) => b - a)
                .map(([color, count]) => (
                  <div key={color} className="flex justify-between items-center">
                    <div className="flex items-center space-x-2">
                      <span className="text-lg">{color}</span>
                      <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                        {color}
                      </span>
                    </div>
                    <span className="font-medium" style={{ color: 'var(--text-primary)' }}>
                      {count}
                    </span>
                  </div>
                ))}
            </div>
          </div>
        )}

        {Object.keys(stats.typeCounts).length > 0 && (
          <div className="mt-6">
            <h4 className="text-sm font-medium mb-3" style={{ color: 'var(--text-secondary)' }}>
              Card Types
            </h4>
            <div className="space-y-2">
              {Object.entries(stats.typeCounts)
                .sort(([, a], [, b]) => b - a)
                .slice(0, 8)
                .map(([type, count]) => (
                  <div key={type} className="flex justify-between">
                    <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                      {type}
                    </span>
                    <span className="font-medium" style={{ color: 'var(--text-primary)' }}>
                      {count}
                    </span>
                  </div>
                ))}
            </div>
          </div>
        )}
      </div>

      <div className="glass-panel rounded-2xl p-6">
        <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
          Group Cards By
        </h3>
        <div className="space-y-2">
          {GROUP_OPTIONS.map((option) => (
            <button
              key={option.value}
              type="button"
              onClick={() => onGroupByChange(option.value)}
              className={`nav-item w-full text-left px-3 py-2 ${
                groupBy === option.value ? 'nav-item-active' : 'nav-item-hover'
              }`}
            >
              {option.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}