import { Components } from "tinacms/dist/rich-text";
import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
import NewsletterSignup, { NewsletterSignupProps, newsletterSignupSchema } from "./newsletter-signup";
import { Prism } from "tinacms/dist/rich-text/prism";
import React from "react";
import Image, { ImageProps, imageSchema } from "./image";
import { RichTextTemplate } from "@tinacms/schema-tools";

const inlineComponents: Components<{
    BlockQuote: BlockQuoteProps;
    DateTime: DateTimeProps;
    NewsletterSignup: NewsletterSignupProps;
    Image: ImageProps;
}> = {
    code_block: (props) => <Prism { ...props } />,
    BlockQuote,
    DateTime,
    NewsletterSignup,
    img: (props) => (
        <span className="flex items-center justify-center">
            <img src={ props.url } alt={ props.alt } />
        </span>
    ),
    Image
};

export const richTextTemplates: RichTextTemplate[] = [
    dateTimeSchema,
    blockQuoteSchema,
    newsletterSignupSchema,
    imageSchema
];

export default inlineComponents;