import './blocks.css';

export interface StatItem {
  label: string;
  value: string;
  description?: string;
}

export interface StatsPanelProps {
  heading?: string;
  stats: StatItem[];
}

export function StatsPanel({ heading, stats }: StatsPanelProps) {
  return (
    <section className="shared-card">
      {heading && <h3>{heading}</h3>}
      <div className="shared-stats">
        {stats.map((stat) => (
          <div key={stat.label} className="shared-stat">
            <strong>{stat.value}</strong>
            <span>{stat.label}</span>
            {stat.description && <p>{stat.description}</p>}
          </div>
        ))}
      </div>
    </section>
  );
}


