import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/clerk-react'
import './index.css'
import App from './App.jsx'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Clerk publishable key')
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ClerkProvider
      publishableKey={PUBLISHABLE_KEY}
      signInUrl="/sign-in"
      signUpUrl="/sign-up"
      appearance={{
        variables: {
          colorPrimary: '#E24B4A',
          borderRadius: '8px',
        },
        elements: {
          formButtonPrimary: {
            backgroundColor: '#E24B4A',
          },
          footerActionLink: {
            color: '#E24B4A',
          },
        },
      }}
    >
      <App />
    </ClerkProvider>
  </StrictMode>,
)