src/App.tsx

import React, { useState } from 'react';
import { slidesData } from './data/slides';
import { styles } from './styles/appStyles';
import ProgressBar from './components/ProgressBar';
import SlideRenderer from './components/SlideRenderer';

const App = () => {
    const [step, setStep] = useState(0);

    const handleNext = () => setStep(prev => Math.min(prev + 1, slidesData.length - 1));
    const handlePrev = () => setStep(prev => Math.max(0, prev - 1));

    const currentSlideData = slidesData[step];
    
    return (
        <div style={styles.card}>
            <ProgressBar current={step} total={slidesData.length} />
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '2rem', overflowY: 'auto' }}>
                <SlideRenderer slide={currentSlideData} />
            </div>
            <div style={{...styles.buttonContainer, padding: '0 2rem 2rem 2rem'}}>
                <button onClick={handlePrev} disabled={step === 0} style={{ ...styles.button, ...(step === 0 && styles.buttonDisabled) }}>
                    Previous
                </button>
                <button onClick={handleNext} disabled={step === slidesData.length - 1} style={{ ...styles.button, ...(step === slidesData.length - 1 && styles.buttonDisabled) }}>
                    Next
                </button>
            </div>
        </div>
    );
};

export default App;