import { safeGetItem, safeSetItem, safeRemoveItem } from "./utils/storage";
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
import { initZoomHandler } from './utils/zoom';

initZoomHandler();

// Apply dark mode from localStorage if set
if (safeGetItem('theme') === 'dark') {
  document.documentElement.classList.add('dark');
}

function Fallback({ error }: { error: any }) {
  return (
    <div role="alert" style={{ padding: 20, color: 'red' }}>
      <h2>Có lỗi xảy ra:</h2>
      <pre style={{ whiteSpace: 'pre-wrap' }}>{error.message}</pre>
    </div>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ErrorBoundary FallbackComponent={Fallback}>
      <App />
    </ErrorBoundary>
  </StrictMode>,
);