import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { ThemeProvider } from './contexts/ThemeContext'
import { LanguageProvider, useLanguage } from './contexts/LanguageContext'
import FloatingHeader from './components/FloatingHeader'
import HomePage from './components/HomePage'
import ComparePage from './components/ComparePage'
import './styles/index.css'

function Layout({ children }: { children: React.ReactNode }) {
  const { t } = useLanguage()

  return (
    <div className="app">
      <FloatingHeader />
      <main className="app-main" style={{ paddingTop: '8rem' }}>
        {children}
      </main>
      <footer className="app-footer">
        <p>{t('Copyright © by ahdoawhfo All Rights Reserved. ', 'Copyright © by ahdoawhfo All Rights Reserved. ')}</p>
      </footer>
    </div>
  )
}

function AppRoutes() {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/result/:id" element={<HomePage />} />
          <Route path="/compare" element={<ComparePage />} />
          <Route path="/compare/result/:id" element={<ComparePage />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  )
}

export default function App() {
  return (
    <ThemeProvider>
      <LanguageProvider>
        <AppRoutes />
      </LanguageProvider>
    </ThemeProvider>
  )
}