import { wrapper } from '@keystatic/core/content-components';
import { fields } from '@keystatic/core';
import { megaphoneIcon } from '@keystar/ui/icon/icons/megaphoneIcon';

const calloutComponent = {
  Callout: wrapper({
    label: 'Callout',
    icon: megaphoneIcon,
    schema: {
      type: fields.select({
        label: 'Type',
        defaultValue: 'default',
        options: [
          {
            label: 'Default',
            value: 'default',
          },
          {
            label: 'Optional',
            value: 'optional',
          },
          {
            label: 'Example',
            value: 'example',
          },
          {
            label: 'Spoiler',
            value: 'spoiler',
          },
        ],
      }),
      title: fields.text({
        label: 'Title',
      }),
    },
  }),
};

export default calloutComponent;
