import React from 'react';

interface Stat {
  value: string;
  label: string;
  icon?: React.ReactNode;
}

interface StatsProps {
  stats: Stat[];
}

export default function Stats({ stats }: StatsProps) {
  return (
    <div className="my-12 grid grid-cols-1 md:grid-cols-3 gap-6">
      {stats.map((stat, index) => (
        <div 
          key={index}
          className="bg-gradient-to-br from-primary/5 to-primary/10 p-6 rounded-xl border border-primary/20 text-center hover:shadow-md transition-shadow"
        >
          {stat.icon && (
            <div className="text-primary mb-3 flex justify-center">
              {stat.icon}
            </div>
          )}
          <div className="text-4xl font-bold text-primary mb-2">
            {stat.value}
          </div>
          <div className="text-text-secondary font-medium">
            {stat.label}
          </div>
        </div>
      ))}
    </div>
  );
}
