import React from 'react';
import { createRoot } from 'react-dom/client'
import '@/css/main.css'
import App from '@/components/pages/App'
import '@/config/constants';
import { TitleProvider } from "@/context/TitleContext";
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { TracingInstrumentation } from '@grafana/faro-web-tracing';

initializeFaro({
    url: 'https://faro-collector-prod-us-west-0.grafana.net/collect/4be6b1cb063deee9f9f54fc46da6c6e7',
    app: {
        name: 'Surge365 Mass Email',
        version: '1.0.0',
        environment: 'production'
    },

    instrumentations: [
        // Mandatory, omits default instrumentations otherwise.
        ...getWebInstrumentations(),

        // Tracing package to get end-to-end visibility for HTTP requests.
        new TracingInstrumentation(),
    ],
});

const rootElement = document.getElementById('root');
if (rootElement) {
    createRoot(rootElement).render(
        <React.StrictMode>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
                <TitleProvider>
                    <App />
                </TitleProvider>
            </LocalizationProvider>
        </React.StrictMode>
    );
} else {
    throw new Error('Root element not found');
}