import { t } from "./lib/i18n";
import React, { Component, type ReactNode } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { StoreProvider } from "./lib/context";
import App from "./App";
import { StartupExperience } from "./components/StartupExperience";
import "./styles.css";
class ErrorBoundary extends Component<
  { children: ReactNode },
  { error: boolean }
> {
  state = { error: false };
  static getDerivedStateFromError() {
    return { error: true };
  }
  render() {
    return this.state.error ? (
      <div className="empty">
        <h1>{t("LET’S TRY THAT AGAIN.")}</h1>
        <p>{t("Something interrupted the page.")}</p>
        <button className="btn btn-dark" onClick={() => location.reload()}>{t("Reload store")}</button>
      </div>
    ) : (
      this.props.children
    );
  }
}
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ErrorBoundary>
      <BrowserRouter>
        <StoreProvider>
          <StartupExperience><App /></StartupExperience>
        </StoreProvider>
      </BrowserRouter>
    </ErrorBoundary>
  </React.StrictMode>,
);