import { AppShell } from '@tale/ui/app-shell';
import { RouterProvider } from '@tanstack/react-router';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import { i18n } from '@/lib/i18n/i18n';

import { router } from './router';

import './globals.css';
import './locals.css';

const root = document.getElementById('root');
if (!root) throw new Error('Missing #root element');

// `<AppShell>` enforces the standard `<ThemeProvider> → <LocaleProvider>
// → <I18nextProvider> → <LocaleSync>` stack every Tale frontend uses. Drop
// the `locale` prop and mount `<LocaleSync locale={useCurrentLocale()} />`
// from the root route instead if this service ships its language in the
// URL (web/docs pattern). Drop `theme` if pinned to a single theme.
createRoot(root).render(
  <StrictMode>
    <AppShell i18n={i18n} locale={{ mode: 'client' }} theme>
      <RouterProvider router={router} />
    </AppShell>
  </StrictMode>,
);
