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

const sidenoteComponents = {
  Sidenote: inline({
    label: 'Sidenote',
    icon: panelRightDashedIcon,
    schema: {
      id: fields.text({
        label: 'ID',
        validation: {
          isRequired: true,
        },
      }),
      title: fields.text({
        label: 'Title',
      }),
      marker: fields.text({
        label: 'Marker',
        defaultValue: '⋄',
      }),
      content: fields.text({
        label: 'Body',
        multiline: true,
        validation: { isRequired: true },
      }),
      type: fields.select({
        label: 'Type',
        options: [
          {
            value: 'default',
            label: 'Default',
          },
          {
            value: 'example',
            label: 'Example',
          },
          {
            value: 'optional',
            label: 'Optional',
          },
        ],
        defaultValue: 'default',
      }),
    },
  }),
};

export default sidenoteComponents;