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

type FeaturedIconColor = "success" | "gray" | "brand" | "error" | "warning";


interface Value {
    title: string;
    description: string;
    icon?: string | FC<{ className?: string }>;
    color?: FeaturedIconColor;
}

interface ValuesSectionProps {
    values?: Value[];
    label?: string;
    title?: string;
    subtitle?: string;
    description?: string;
    backgroundColor?: string;
    className?: string;
}

export const ValuesSection = ({
    values = [],
    label = "",
    title = "",
    subtitle = "",
    description = "",
    backgroundColor = "bg-secondary",
    className = "",
}: ValuesSectionProps) => {
    const hasValues = values.length > 0;
    return (
        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
                    {label && (
                        <span className="text-sm font-semibold text-brand-secondary md:text-md">{label}</span>
                    )}
                    {title && (
                        <h2 className={`${label ? 'mt-3' : ''} 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>
                    )}
                    {description && !hasValues && (
                        <p className="mt-4 text-md text-tertiary md:mt-6 md:text-lg">
                            {description}
                        </p>
                    )}
                </div>

                {values.length > 0 ? (
                    <div className="mt-12 md:mt-16">
                        {(() => {
                            // Check if any icons are missing - if so, use stars for all
                            const anyIconMissing = values.some((value: { icon?: string | FC<{ className?: string }> }) => 
                                typeof value.icon === 'string' && value.icon && !mapIcon(value.icon)
                            );
                            const useStarForAll = anyIconMissing;

                            return (
                                <ul className="grid w-full grid-cols-1 justify-items-center gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-16 lg:grid-cols-3">
                                    {values.map((value: { title: string; description: string; icon?: string | FC<{ className?: string }>; color?: FeaturedIconColor }, index: number) => {
                                        // Use star for all if any icon is missing, otherwise use the specified icon
                                        const IconComponent = useStarForAll ? mapIcon('star') : (mapIcon(value.icon) || mapIcon('star'));
                                        if (!IconComponent) return null;
                                
                                const IconWrapper = ({ className }: { className?: string }) => (
                                    <div className={className}>
                                        <IconComponent className="w-full h-full" />
                                    </div>
                                );

                                return (
                                    <li key={index}>
                                        <div className="flex max-w-sm flex-col items-center gap-4 text-center">
                                            <FeaturedIcon 
                                                icon={IconWrapper} 
                                                size="lg" 
                                                color={(value.color as FeaturedIconColor) || 'gray'} 
                                                theme="modern" 
                                                className="hidden md:inline-flex"
                                            />
                                            <FeaturedIcon 
                                                icon={IconWrapper} 
                                                size="md" 
                                                color={(value.color as FeaturedIconColor) || 'gray'} 
                                                theme="modern" 
                                                className="inline-flex md:hidden"
                                            />

                                            <div>
                                                <h3 className="text-lg font-semibold text-primary">{value.title}</h3>
                                                <p className="mt-1 text-md text-tertiary">{value.description}</p>
                                            </div>
                                        </div>
                                        </li>
                                    );
                                })}
                            </ul>
                        );
                        })()}
                    </div>
                ) : null}
            </div>
        </section>
    );
};


