import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { TooltipProvider } from '@/components/tooltip';
import { App } from './app';
import { ShowcaseToaster } from '~/chrome/ui/toaster';
import { I18nProvider } from './i18n';
import './showcase.css';

const root = document.getElementById('root');
if (!root) throw new Error('#root is missing from index.html');

/*
 * Two kit providers wrap the app, and both are chrome rather than subject
 * matter: `TooltipProvider` is what the kit's Tooltip needs above it (Radix
 * owns the shared open/close timing), and `Toaster` is the portal every
 * `toast()` in the chrome renders into. `theme` is left at its default
 * `'inherit'` on purpose — the showcase switches theme with a `dark` class on
 * the root element, which reaches the portal on `document.body`.
 *
 * The `Toaster` is wrapped rather than mounted directly so `/toasts` can move it
 * between the six corners and have the demo be the real thing; the wrapper is
 * the whole of that, and it defaults to `bottom-right` as before. A second
 * `Toaster` would not have worked — see the note in `chrome/ui/toaster.tsx`.
 */
createRoot(root).render(
  <StrictMode>
    <I18nProvider>
      <TooltipProvider>
        <App />
        <ShowcaseToaster />
      </TooltipProvider>
    </I18nProvider>
  </StrictMode>
);