import { listTreeIcon } from '@keystar/ui/icon/icons/listTreeIcon';
import { fields } from '@keystatic/core';
import { repeating, block } from '@keystatic/core/content-components';

const definitionlistComponents = {
  DefinitionList: repeating({
    label: 'Definition List',
    icon: listTreeIcon,
    children: ['DefinitionItem'],
    schema: {},
  }),
  DefinitionItem: block({
    label: 'Definition Item',
    forSpecificLocations: true,
    schema: {
      term: fields.text({ label: 'Term' }),
      definitions: fields.array(
        fields.text({ label: 'Definition', multiline: true }),
        {
          label: 'Definitions',
          itemLabel: (props) => props.value || 'Definition',
        }
      ),
    },
  }),
};

export default definitionlistComponents;
