src/components/ContentRenderer.tsx

import React from 'react';
import { BlockMath } from 'react-katex';
import 'katex/dist/katex.min.css';
import { ContentItem } from '../data/slides';
import { styles } from '../styles/appStyles';

const ContentRenderer = ({ content }: { content: ContentItem[] }) => {
    const renderContentItem = (item: ContentItem, index: number) => {
        switch (item.type) {
            case 'paragraph':
                return <p key={`content-${index}`} style={styles.paragraph} dangerouslySetInnerHTML={{ __html: item.text }} />;
            case 'list':
                return (
                    <ul key={`content-${index}`} style={{paddingLeft: '20px'}}>
                        {item.items.map((li, i) => (
                            <li key={`li-${i}`} style={styles.paragraph} dangerouslySetInnerHTML={{ __html: li }} />
                        ))}
                    </ul>
                );
            case 'formula':
                return (
                    <div key={`content-${index}`} style={styles.formula}>
                        <BlockMath math={item.tex} />
                    </div>
                );
            default:
                return null;
        }
    };

    return <>{content.map(renderContentItem)}</>;
};

export default ContentRenderer;