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

const figureComponent = {
  Figure: block({
    label: 'Figure',
    icon: imageIcon,
    schema: {
      src: fields.image({
        label: 'Image',
        directory: 'src/content/articles',
        publicPath: '/content/articles',
      }),
      alt: fields.text({
        label: 'Alt Text',
        validation: {
          length: {
            min: 1,
          },
        },
      }),
      caption: fields.text({
        label: 'Caption',
        multiline: true,
      }),
      credit: fields.text({
        label: 'Credit/Attribution',
        description: 'Photographer, artist, or source',
      }),
    },
  }),
};

export default figureComponent;
