import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { routes } from './routes/index.jsx';

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './index.css';
import { Provider } from './store/Provider.jsx';
import { ConfigProvider } from 'antd';
import { GoogleOAuthProvider } from '@react-oauth/google';

const renderRoutes = (routes) => {
    return routes.map((route) => {
        if (route.children) {
            return (
                <Route key={route.path} path={route.path} element={route.element}>
                    {route.children.map((child) => (
                        <Route
                            key={child.path || 'index'}
                            path={child.path}
                            index={child.index}
                            element={child.element}
                        />
                    ))}
                </Route>
            );
        }
        return <Route key={route.path} path={route.path} element={route.element} />;
    });
};

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <GoogleOAuthProvider clientId={import.meta.env.VITE_CLIENT_ID}>
            <ConfigProvider
                theme={{
                    token: {
                        fontFamily: '"Inter", sans-serif',
                        colorPrimary: '#ef4444',
                        borderRadius: 8,
                        controlHeight: 40,
                    },
                }}
            >
                <Provider>
                    <Router>
                        <Routes>{renderRoutes(routes)}</Routes>
                    </Router>
                </Provider>
            </ConfigProvider>
        </GoogleOAuthProvider>
    </StrictMode>,
);
