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-12 flex w-full max-w-3xl flex-col items-center text-center">
                        {title && (
                            <h2 className="text-display-sm font-semibold text-primary md:text-display-md">
                                {title}
                            </h2>
                        )}
                        {subtitle && (
                            <p className="mt-4 text-lg text-tertiary md:mt-5 md:text-xl">
                                {subtitle}
                            </p>
                        )}
                    </div>
                )}
                
                <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
                    {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="text-center">
                                <div className="flex items-center justify-center gap-2">
                                    {IconComponent && (
                                        <div className="size-6 shrink-0">
                                            <IconComponent className="w-full h-full text-brand-secondary" />
                                        </div>
                                    )}
                                    <div className="text-display-lg font-semibold text-primary md:text-display-xl">
                                        {stat.number}
                                    </div>
                                </div>
                                <div className="mt-2 text-lg text-tertiary">{stat.label}</div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </section>
    );
};
