import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/clerk-react'
// Token + SDK styles must load before app styles. tokens.css defines the
// CSS custom properties everything else consumes; the SDK styles depend on them.
import '@resvr-dev/tokens/tokens.css'
import '@resvr-dev/platform-react/styles.css'
import './index.css'
import App from './App.tsx'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error(
    'Missing VITE_CLERK_PUBLISHABLE_KEY. Copy .env.local.example to .env.local and ' +
      'set the ResOS Clerk publishable key (the same instance the other ResOS apps use).',
  )
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
      <App />
    </ClerkProvider>
  </StrictMode>,
)