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(--typo-size-md)',
        options: [
          { label: '2XS', value: 'var(--typo-size-2xs)' },
          { label: 'XS', value: 'var(--typo-size-xs)' },
          { label: 'SM', value: 'var(--typo-size-sm)' },
          { label: 'MD', value: 'var(--typo-size-md)' },
          { label: 'LG', value: 'var(--typo-size-lg)' },
          { label: 'XL', value: 'var(--typo-size-xl)' },
          { label: '2XL', value: 'var(--typo-size-2xl)' },
          { label: '3XL', value: 'var(--typo-size-3xl)' },
          { label: '4XL', value: 'var(--typo-size-4xl)' },
          { label: '5XL', value: 'var(--typo-size-5xl)' },
          { label: '6XL', value: 'var(--typo-size-6xl)' },
          { label: '7XL', value: 'var(--typo-size-7xl)' },
          { label: '8XL', value: 'var(--typo-size-8xl)' },
        ],
      }),
      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;
