import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { Toaster } from "react-hot-toast";
import ClarityAnalytics from "@/components/common/Clarity";
import "./index.css";
import { ErrorBoundary } from "react-error-boundary";
import ErrorFallback from "@/components/common/ErrorFallback";
import { router } from "./router";
import { AuthProvider } from "@/context/AuthContext";
import Analytics from "@/components/common/Analytics";

ReactDOM.createRoot(
  document.getElementById("root")!
).render(
  <React.StrictMode>

    <ErrorBoundary
    FallbackComponent={ErrorFallback}
  >

 
    <AuthProvider>

      <Analytics />

        <ClarityAnalytics />


      <RouterProvider router={router} />

      <Toaster
        position="top-center"
        toastOptions={{
          style: {
            background: "#0f172a",
            color: "#fff",
            border: "1px solid #334155",
          },
        }}
      />

    </AuthProvider>
     </ErrorBoundary>
  </React.StrictMode>
);