frontend/src/components/datasets/protein/StatsPanel.tsx

import React from 'react';
import './StatsPanel.css';

export const StatsPanel: React.FC = () => {
  return (
    <div className="stats-panel">
      <div className="stat-card">
        <div className="stat-value">64,812</div>
        <div className="stat-label">Sequences with multiple conformational observations</div>
      </div>

      <div className="stat-card">
        <div className="stat-value">11,946</div>
        <div className="stat-label">Sequences with multiple state clusters</div>
      </div>

      <div className="stat-card">
        <div className="stat-value">355,731</div>
        <div className="stat-label">Conformational observations</div>
      </div>

      <div className="stat-card">
        <div className="stat-value">90,745</div>
        <div className="stat-label">Unique state clusters</div>
      </div>

      <div className="stat-card">
        <div className="stat-value">27.6 million</div>
        <div className="stat-label">Transition triplets between conformational observations</div>
      </div>

      <div className="stat-card">
        <div className="stat-value">5.7 million</div>
        <div className="stat-label">Transition triplets between distinct states</div>
      </div>
    </div>
  );
};