import { StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js' // JS do Bootstrap (inclui Popper)
import 'bootstrap-icons/font/bootstrap-icons.css'
import './index.css'
import './i18n' // Inicializa i18next
import App from './App.jsx'

// Loading fallback enquanto carrega traduções
const LoadingFallback = () => (
  <div className="d-flex justify-content-center align-items-center vh-100 bg-dark">
    <div className="spinner-border text-primary" role="status">
      <span className="visually-hidden">Loading...</span>
    </div>
  </div>
);

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Suspense fallback={<LoadingFallback />}>
      <App />
    </Suspense>
  </StrictMode>,
)
