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

const sidenoteComponents = {
  Sidenote: inline({
    label: 'Sidenote',
    icon: panelRightDashedIcon,
    schema: {
      id: fields.text({
        label: 'ID',
        description: 'Unique Identifier (Auto-generated)',
      }),
      marker: fields.text({
        label: 'Marker',
        description: 'Number or Glyph for reference',
        defaultValue: '⋄',
        validation: {
          length: {
            min: 1,
            max: 3,
          },
        },
      }),
      content: fields.text({
        label: 'Note Content',
        multiline: true,
        validation: {
          length: {
            min: 1,
          },
        },
      }),
      type: fields.select({
        label: 'Type',
        description: 'Visual Style',
        options: [
          {
            label: 'Default',
            value: 'default',
          },
          {
            label: 'Lore',
            value: 'lore',
          },
          {
            label: 'Crunch',
            value: 'crunch',
          },
          {
            label: 'Example',
            value: 'example',
          },
        ],
        defaultValue: 'default',
      }),
    },
  }),
};

export default sidenoteComponents;