import { fields } from '@keystatic/core'
import { inline } from '@keystatic/core/content-components'

import { flameIcon } from '@keystar/ui/icon/icons/flameIcon'

import { ELEMENT_STYLES, ELEMENTS } from '@/lib/constants/elements'

export const element = inline({
  label: 'Element',
  description: 'An elemental glyph, set in Unigrim Dee',
  icon: flameIcon,
  schema: {
    name: fields.select({
      label: 'Element',
      options: ELEMENTS,
      defaultValue: 'earth',
    }),
    style: fields.select({
      label: 'Style',
      options: ELEMENT_STYLES,
      defaultValue: 'filled',
    }),
  },
})