import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '@/App';
import '@/index.css';
import { Toaster } from '@/components/ui/toaster';
import { AuthProvider } from '@/contexts/SupabaseAuthContext';

const favicon = document.getElementById('favicon');

const svgContent = `
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
    <path d="M21 3H3C1.89543 3 1 3.89543 1 5V17C1 18.1046 1.89543 19 3 19H8V21H16V19H21C22.1046 19 23 18.1046 23 17V5C23 3.89543 22.1046 3 21 3Z" fill="#FF0000"/>
    <rect x="3" y="5" width="18" height="12" fill="#000000">
      <animate attributeName="fill" values="#000000;#0000FF;#0000FF;#000000;#000000" dur="3s" repeatCount="indefinite" />
    </rect>
  </svg>
`;

const faviconUrl = `data:image/svg+xml;base64,${btoa(svgContent)}`;
if (favicon) {
  favicon.href = faviconUrl;
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <AuthProvider>
      <App />
      <Toaster />
    </AuthProvider>
  </React.StrictMode>
);