import { mapIcon } from '../utils/icon-mapping';

interface Value {
  title: string;
  description: string;
  icon?: string;
}

interface ValuesSectionProps {
  title?: string;
  subtitle?: string;
  values?: Value[];
}

export const ValuesSection = ({
  title = "",
  subtitle = "",
  values = [],
}: ValuesSectionProps) => {

  // Check if any icons are missing - if so, use stars for all
  const anyIconMissing = values.some((value) => value.icon && !mapIcon(value.icon));
  const useStarForAll = anyIconMissing;

  return (
    <section>
      <div className="mx-auto max-w-container px-4 md:px-8">
        <div className="mb-12 text-center">
          {subtitle && (
            <p className="text-xs font-body font-normal uppercase tracking-widest mb-4" style={{ color: 'var(--color-text-brand-secondary)' }}>
              {subtitle}
            </p>
          )}
          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
            {title}
          </h2>
        </div>

        <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
          {values.map((value, i: 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'));
            
            return (
              <div key={i} className="text-center">
                {IconComponent && (
                  <div className="mb-6 flex justify-center">
                    <div className="w-12 h-12 flex items-center justify-center text-fg-primary">
                      <IconComponent className="w-full h-full" />
                    </div>
                  </div>
                )}
                <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
                  {value.title}
                </h3>
                {value.description && (
                  <p className="font-body text-base leading-relaxed text-tertiary">
                    {value.description}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

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