export default function Statistics() {
    const stats = [
      {
        value: "10k +",
        label: "Users",
        color: "text-rise-dark"
      },
      {
        value: "$1m +",
        label: "Paid out to users",
        color: "text-rise-dark"
      },
      {
        value: "50",
        label: "Countries",
        icon: "https://ext.same-assets.com/3278459369/2364889921.webp",
        color: "text-rise-dark"
      }
    ];
  
    return (
      <section className="bg-white py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-tomato font-bold text-rise-dark">
              See our <span className="text-rise-teal italic">numbers</span>
            </h2>
          </div>
  
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {stats.map((stat) => (
              <div key={stat.label} className="text-center space-y-2">
                <div className="flex items-center justify-center space-x-2">
                  <span className={`text-4xl md:text-5xl font-tomato font-bold ${stat.color}`}>
                    {stat.value}
                  </span>
                  {stat.icon && (
                    <img
                      src={stat.icon}
                      alt="Countries"
                      className="w-8 h-6 object-contain"
                    />
                  )}
                </div>
                <p className="text-gray-600 font-work text-sm font-medium">
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }
  