import { Route, Routes } from 'react-router-dom'
import { Layout } from './layout'
import { routes } from './routes'
import { useEffect } from 'react'
import './styles/styles.css'

function App() {
  useEffect(() => {
    // Find the element with id 'root'
    const rootElement = document.getElementById('root')

    if (rootElement) {
      // Add the class to the element
      rootElement.classList.add('bodyMain')
    }

    // Cleanup function (optional): Remove the class when the component unmounts
    return () => {
      if (rootElement) {
        rootElement.classList.remove('bodyMain')
      }
    }
  }, [])

  return (
    <Routes>
      <Route element={<Layout />}>
        {routes.map((route, index) => (
          <Route
            key={route.path + index}
            path={route.path}
            element={route.element}
          />
        ))}
      </Route>
    </Routes>
  )
}

export default App