import { ComponentConfig } from '@puckeditor/core';
import StatsSection, { StatsProps } from '../sections/stats-section';

export const StatsBlock: ComponentConfig<StatsProps> = {
  label: 'Stats',
  fields: {
    items: {
      type: 'array',
      label: 'Stats',
      getItemSummary: (item) => item.label || 'Stat',
      defaultItemProps: { label: 'Stat', value: '0', suffix: '' },
      arrayFields: {
        value: { type: 'text', label: 'Value (e.g. 10,000)' },
        suffix: { type: 'text', label: 'Suffix (e.g. +, %, K)' },
        label: { type: 'text', label: 'Label' },
      },
    },
    columns: {
      type: 'radio',
      label: 'Columns',
      options: [
        { label: '2', value: 2 as unknown as string },
        { label: '3', value: 3 as unknown as string },
        { label: '4', value: 4 as unknown as string },
      ],
    },
    align: {
      type: 'radio',
      label: 'Alignment',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
    showDivider: {
      type: 'radio',
      label: 'Show Dividers',
      options: [
        { label: 'Yes', value: true as unknown as string },
        { label: 'No', value: false as unknown as string },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    items: [
      { label: 'Active Investors', value: '10,000', suffix: '+' },
      { label: 'Total Invested', value: '$5M', suffix: '' },
      { label: 'Average Return', value: '12', suffix: '%' },
      { label: 'Countries', value: '50', suffix: '+' },
    ],
    columns: 4,
    align: 'center',
    showDivider: true,
    padding: '32px 0',
  },
  render: StatsSection,
};