import React from 'react';
import type { ComponentConfig } from '@measured/puck';
import {
  createDesignControlsFields,
  applyDesignControls,
  type DesignControlsProps,
} from '../../theme';

export interface Stat {
  value: string;
  label: string;
}

export interface StatsStripProps extends DesignControlsProps {
  stats: Stat[];
  variant: 'light' | 'dark';
}

const StatsStripRender: React.FC<StatsStripProps> = (props) => {
  const { stats, variant, ...designControls } = props;

  const applied = applyDesignControls(designControls);
  const isDark = variant === 'dark';

  return (
    <section
      id={designControls.anchorId || undefined}
      className={`${applied.className} ${isDark ? 'bg-neutral-900' : 'bg-white'}`}
      style={applied.style}
    >
      <div
        className={`${applied.containerClassName || 'max-w-7xl'} mx-auto px-4 sm:px-6 lg:px-8`}
      >
        {stats && stats.length > 0 && (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 sm:gap-12">
            {stats.map((stat, index) => (
            <div key={index} className="text-center">
              <div
                className={`text-4xl sm:text-5xl font-bold ${
                  isDark ? 'text-white' : 'text-primary-600'
                }`}
              >
                {stat.value}
              </div>
              <div
                className={`mt-2 text-sm font-medium ${
                  isDark ? 'text-neutral-400' : 'text-neutral-600'
                }`}
              >
                {stat.label}
              </div>
            </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

const designControlFields = createDesignControlsFields();

export const StatsStrip: ComponentConfig<StatsStripProps> = {
  label: 'Stats Strip',
  fields: {
    stats: {
      type: 'array',
      label: 'Stats',
      arrayFields: {
        value: { type: 'text', label: 'Value' },
        label: { type: 'text', label: 'Label' },
      },
      defaultItemProps: {
        value: '100+',
        label: 'Customers',
      },
    },
    variant: {
      type: 'select',
      label: 'Variant',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
      ],
    },
    // Design Controls
    padding: designControlFields.padding,
    backgroundVariant: designControlFields.backgroundVariant,
    gradientPreset: designControlFields.gradientPreset,
    contentMaxWidth: designControlFields.contentMaxWidth,
    hideOnMobile: designControlFields.hideOnMobile,
    hideOnTablet: designControlFields.hideOnTablet,
    hideOnDesktop: designControlFields.hideOnDesktop,
    anchorId: designControlFields.anchorId,
  },
  defaultProps: {
    stats: [
      { value: '100+', label: 'Stat label' },
      { value: '50+', label: 'Stat label' },
      { value: '24/7', label: 'Stat label' },
      { value: '5.0', label: 'Stat label' },
    ],
    variant: 'light',
    padding: 'lg',
    contentMaxWidth: 'wide',
  },
  render: StatsStripRender,
};

export default StatsStrip;
