import { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import App from './App.tsx';
import Contact from './Contact.tsx';
import './index.css';
import { translations } from './translations';
import { Language } from './types';

function AppWrapper() {
  const [currentLang, setCurrentLang] = useState<Language>('nl');

  const t = (key: string) => {
    const translation = translations[key]?.[currentLang] || key;
    return translation.replace(/<blue>(.*?)<\/blue>/g, 
      (_, text) => `<span class="text-blue-600">${text}</span>`
    );
  };

  return (
    <Router>
      <Routes>
        <Route path="/" element={<App currentLang={currentLang} setCurrentLang={setCurrentLang} t={t} />} />
        <Route path="/contact" element={<Contact currentLang={currentLang} setCurrentLang={setCurrentLang} t={t} />} />
      </Routes>
    </Router>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AppWrapper />
  </StrictMode>
);