import type { FC } from "react";
import { mapIcon } from '../utils/icon-mapping';

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

export const StatisticsSection = ({
    title = "",
    subtitle = "",
    statistics = [],
}: StatisticsSectionProps) => {
    const stats = statistics.map((stat) => ({
        number: stat.number || stat.value || '',
        label: stat.label || '',
        icon: stat.icon,
        description: stat.description,
    }));

    const backgroundColor = "bg-secondary";
    
    return (
        <section className={`${backgroundColor} py-16 md:py-24`}>
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                {(title || subtitle) && (
                    <div className="mx-auto mb-16 flex w-full max-w-3xl flex-col items-center text-center">
                        {title && (
                            <h2 className="font-display text-4xl font-normal md:text-5xl">
                                {title}
                            </h2>
                        )}
                        {subtitle && (
                            <p className="mt-4 text-lg md:mt-5 md:text-xl">
                                {subtitle}
                            </p>
                        )}
                    </div>
                )}
                
                <div className="grid grid-cols-1 gap-12 md:grid-cols-3 md:gap-16">
                    {stats.map((stat: { number: string | number; label: string; icon?: string | FC<{ className?: string }> }, index: number) => {
                        const IconComponent = mapIcon(stat.icon);
                        
                        return (
                            <div key={index} className="flex flex-col items-center text-center">
                                {IconComponent && (
                                    <div className="mb-4 size-8 shrink-0 text-brand-secondary">
                                        <IconComponent className="w-full h-full" />
                                    </div>
                                )}
                                <div className="font-display text-5xl font-normal md:text-6xl" style={{ color: 'rgb(180, 120, 90)' }}>
                                    {stat.number}
                                </div>
                                <div className="mt-3 text-base font-medium">{stat.label}</div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </section>
    );
};
