src/components/SlideRenderer.tsx

import React from 'react';
import { SlideData } from '../data/slides';
import { styles } from '../styles/appStyles';
import ContentPage from './ContentPage';
import Quiz from './Quiz';
import Calculator from './Calculator';
import ContentRenderer from './ContentRenderer';

interface SlideRendererProps {
    slide: SlideData;
}

const SlideRenderer = ({ slide }: SlideRendererProps) => {
    switch (slide.type) {
        case 'title':
        case 'content':
            return <ContentPage data={slide} />;
        case 'practical_problem':
        case 'knowledge_check':
            return (
                <>
                    <h2 style={styles.title}>{slide.title}</h2>
                    {slide.quiz && <Quiz quiz={slide.quiz} />}
                </>
            );
        case 'calculator':
             return (
                <>
                    <h2 style={styles.title}>{slide.title}</h2>
                    {slide.content && <ContentRenderer content={slide.content} />}
                    {slide.calculatorDefaults && 
                        <Calculator defaults={slide.calculatorDefaults} />}
                </>
            );
        default:
            return <p>Slide type not supported.</p>;
    }
};

export default SlideRenderer;