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

const elementCompontent = {
  ElementSymbol: inline({
    label: 'Element Symbol',
    icon: componentIcon,
    schema: {
      element: fields.relationship({
        label: 'Element',
        collection: 'cr_elements',
      }),
      size: fields.select({
        label: 'Size',
        defaultValue: 'var(--type-0)',
        options: [
          { label: '2XS', value: 'var(--type--3)' },
          { label: 'XS', value: 'var(--type--2)' },
          { label: 'SM', value: 'var(--type--1)' },
          { label: 'MD', value: 'var(--type-0)' },
          { label: 'LG', value: 'var(--type-1)' },
          { label: 'XL', value: 'var(--type-2)' },
          { label: '2XL', value: 'var(--type-3)' },
          { label: '3XL', value: 'var(--type-4)' },
          { label: '4XL', value: 'var(--type-5)' },
          { label: '5XL', value: 'var(--type-6)' },
          { label: '6XL', value: 'var(--type-7)' },
          { label: '7XL', value: 'var(--type-8)' },
        ],
      }),
      color: fields.select({
        label: 'Color',
        defaultValue: 'inherit',
        options: [
          { label: 'Inherit', value: 'inherit' },
          { label: 'primary', value: 'var(--color-primary)' },
          { label: 'secondary', value: 'var(--color-secondary)' },
          { label: 'tertiary', value: 'var(--color-tertiary)' },
          { label: 'primary', value: 'var(--color-primary)' },
          { label: 'Text', value: 'var(--color-text-primary)' },
          { label: 'Text Inverse', value: 'var(--color-text-inverse)' },
        ],
      }),
    },
  }),
};

export default elementCompontent;
