const App = () => {
    const [currentView, setCurrentView] = useState('home');

    // This ensures icons update when view changes
    useEffect(() => {
        if (window.lucide) {
            window.lucide.createIcons();
        }
    }, [currentView]);

    const renderView = () => {
        switch(currentView) {
            case 'home': return <Home />;
            case 'discover': return <Discover />;
            case 'people': return <People />;
            case 'opportunities': return <Opportunities />;
            case 'activities': return <Activities />; // We will rename to Events.jsx eventually, but keep Activities mapping if it helps, wait, the script tag uses Activities.jsx. Let's map events to Events.
            case 'events': return <Events />;
            case 'communities': return <Communities />;
            case 'projects': return <Projects />;
            case 'messages': return <Messages />;
            case 'notifications': return <Notifications />;
            case 'profile': return <Profile />;
            case 'saved': return <Saved />;
            default: return <Home />;
        }
    };

    return (
        <AppProvider>
            <Layout currentView={currentView} setView={setCurrentView}>
                {renderView()}
            </Layout>
        </AppProvider>
    );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);