import { ComponentConfig } from '@puckeditor/core';
import LogosSection, { LogosProps } from '../sections/logos-section';

export const LogosBlock: ComponentConfig<LogosProps> = {
  label: 'Logos',
  fields: {
    title: { type: 'text', label: 'Label Above Logos (optional)' },
    logos: {
      type: 'array',
      label: 'Logos',
      getItemSummary: (item) => item.alt || 'Logo',
      defaultItemProps: { alt: '', imageUrl: '', href: '' },
      arrayFields: {
        alt: { type: 'text', label: 'Alt Text' },
        imageUrl: { type: 'text', label: 'Image URL' },
        href: { type: 'text', label: 'Link URL (optional)' },
      },
    },
    height: {
      type: 'select',
      label: 'Logo Height',
      options: [
        { label: '32px', value: '32px' },
        { label: '40px', value: '40px' },
        { label: '48px', value: '48px' },
        { label: '56px', value: '56px' },
        { label: '64px', value: '64px' },
      ],
    },
    grayscale: {
      type: 'radio',
      label: 'Grayscale',
      options: [
        { label: 'Yes', value: true as unknown as string },
        { label: 'No', value: false as unknown as string },
      ],
    },
    padding: { type: 'text', label: 'Padding (CSS)' },
  },
  defaultProps: {
    title: 'Trusted by leading brands',
    logos: [
      {
        alt: 'Logo 1',
        imageUrl:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png',
        href: '',
      },
      {
        alt: 'Logo 2',
        imageUrl:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png',
        href: '',
      },
      {
        alt: 'Logo 3',
        imageUrl:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/1200px-Microsoft_logo.svg.png',
        href: '',
      },
    ],
    height: '40px',
    grayscale: true,
    padding: '32px 0',
  },
  render: LogosSection,
};