import { highlighterIcon } from '@keystar/ui/icon/icons/highlighterIcon'
import { fields } from '@keystatic/core'
import { mark } from '@keystatic/core/content-components'

export const inlineComponents = {
  Highlighter: mark({
    label: 'Highlighter',
    icon: highlighterIcon,
    schema: {
      color: fields.select({
        label: 'color',
        options: [
          { label: 'Primary', value: 'primary' },
          { label: 'Secondary', value: 'secondary' },
          { label: 'Tertiary', value: 'tertiary' },
          { label: 'Quarternary', value: 'quarternary' },
        ],
        defaultValue: 'primary',
      }),
    },
  }),
}
