interface StatisticsSectionProps {
  title?: string;
  subtitle?: string;
  statistics?: Array<{
    number?: string;
    value?: string;
    label: string;
  }>;
}

export const StatisticsSection = ({
  title = "",
  subtitle = "",
  statistics = [],
}: StatisticsSectionProps) => {

  return (
    <section>
      <div className="mx-auto max-w-container px-4 md:px-8">
        {(title || subtitle) && (
          <div className="mb-12 text-center">
            {title && (
              <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
                {title}
              </h2>
            )}
            {subtitle && (
              <p className="mt-4 font-body text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
                {subtitle}
              </p>
            )}
          </div>
        )}

        {statistics.length > 0 && (
          <div className="grid grid-cols-1 gap-8 md:grid-cols-3 justify-items-center">
            {statistics.map((stat, i: number) => (
              <div key={i} className="text-center max-w-xs w-full">
                <div className="font-display text-5xl font-normal text-fg-primary mb-2">
                  {stat.number || stat.value}
                </div>
                <p className="text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
                  {stat.label}
                </p>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('statistics-section', 'aman', StatisticsSection);
