import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
 import { ClerkProvider } from '@clerk/clerk-react'
import './index.css'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Contact from './pages/Contact'
import Profile from './Profile/Index'
import AddListing from './add-listing'
import Vehicle from './pages/Vehicle'
import VehicleDetails from './pages/VehicleDetails'
import Blog from './pages/Blog'
import Shop from './pages/Shop'
import About from './pages/About'
import LayoutPage from './pages/LayoutPage'
import Home from './pages/Home'
import Choose from './pages/Choose'
import { Toaster } from './components/ui/sonner'

// Auth
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <LayoutPage/>,
    children: [
      {
        index: true,
        element: <Home/>
      },
      {
        path: 'about',
        element: <About/>
      },
      {
        path: 'vehicle',
        element: <Vehicle/>
      },
      {
        path: 'vehicledetails/:id',
        element: <VehicleDetails/>
      },
      {
        path: 'contact',
        element: <Contact/>
      },
      {
        path: 'blog',
        element: <Blog/>
      },
      {
        path: 'shop',
        element: <Shop/>
      },
       {
          path : 'choose',
          element: <Choose/>
      }
    ]
  },
  {
    path: '/profile',
    element: <Profile/>
  },
  {
    path: '/add-listing',
    element: <AddListing/>
  },
 
])

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY}>
      <RouterProvider router={router}/>
          <Toaster/>
    </ClerkProvider>
  </StrictMode>,
)