import React from 'react';
import { useTranslation } from 'react-i18next';
import { Calendar, Building2, Globe, Clock } from 'lucide-react';

const StatsSection: React.FC = () => {
  const { t } = useTranslation();

  const stats = [
    {
      icon: Calendar,
      value: '1M+',
      label: t('marketing.stats.appointments'),
      color: 'brand',
    },
    {
      icon: Building2,
      value: '5,000+',
      label: t('marketing.stats.businesses'),
      color: 'green',
    },
    {
      icon: Globe,
      value: '50+',
      label: t('marketing.stats.countries'),
      color: 'purple',
    },
    {
      icon: Clock,
      value: '99.9%',
      label: t('marketing.stats.uptime'),
      color: 'orange',
    },
  ];

  const colorClasses: Record<string, string> = {
    brand: 'text-brand-600 dark:text-brand-400',
    green: 'text-green-600 dark:text-green-400',
    purple: 'text-purple-600 dark:text-purple-400',
    orange: 'text-orange-600 dark:text-orange-400',
  };

  return (
    <section className="py-20 bg-white dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="inline-flex p-3 rounded-xl bg-gray-100 dark:bg-gray-800 mb-4">
                <stat.icon className={`h-6 w-6 ${colorClasses[stat.color]}`} />
              </div>
              <div className={`text-4xl lg:text-5xl font-bold mb-2 ${colorClasses[stat.color]}`}>
                {stat.value}
              </div>
              <div className="text-sm text-gray-600 dark:text-gray-400">
                {stat.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default StatsSection;
