import { ComponentConfig } from '@puckeditor/core';
import ColorPicker from '../fields/color-picker';
import CTASection, { CTAProps } from '../sections/cta-section';

export const CTABlock: ComponentConfig<{
  props: CTAProps;
}> = {
  label: 'CTA',
  fields: {
    title: { type: 'text', label: 'Title' },
    buttonLabel: { type: 'text', label: 'Button Label' },
    buttonHref: { type: 'text', label: 'Button URL' },
    backgroundColor: {
      type: 'custom',
      label: 'Background Color',
      render: (props) => <ColorPicker {...props} />,
    },
  },
  defaultProps: {
    title: 'Start Trading Today',
    buttonLabel: 'Get Started',
    buttonHref: '#',
    backgroundColor: '#8c45ff',
  },
  render: CTASection,
};