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-16 grid grid-cols-1 md:grid-cols-3 border border-neutral-200 rounded-2xl overflow-hidden shadow-sm">
      {stats.map((stat, index) => (
        <div 
          key={index}
          className={`p-8 flex flex-col items-center text-center transition-all duration-500 hover:bg-neutral-50 group ${
            index !== stats.length - 1 ? 'border-b md:border-b-0 md:border-r border-neutral-200' : ''
          }`}
        >
          {stat.icon && (
            <div className="text-primary mb-4 transform transition-transform group-hover:scale-110 duration-500">
              {stat.icon}
            </div>
          )}
          <div className="text-5xl font-bold text-text-primary mb-3 tracking-tight">
            {stat.value}
          </div>
          <div className="text-xs font-bold text-text-secondary uppercase tracking-[0.2em]">
            {stat.label}
          </div>
          
          {/* Industrial accent line */}
          <div className="w-8 h-[2px] bg-primary/20 mt-6 transition-all group-hover:w-16 group-hover:bg-primary duration-500" />
        </div>
      ))}
    </div>
  );
}