import React from 'react';

type MetricsProps = {
  metrics: [string, string][]; // Directly define the array as an array of tuples (string, number)
};

const SummaryMetrics: React.FC<MetricsProps> = ({ metrics }) => {
  return (
    <div className='d-flex flex-wrap justify-content-around gap-3'>
      {metrics.map(([title, value], index) => (
        <div key={index} className='card text-center flex-grow-1'>
          <div className='card-header'>
            <b>{title}</b>
          </div>
          <div className='card-body'>{value}</div>
        </div>
      ))}
    </div>
  );
};

export default SummaryMetrics;