import { RouterProvider } from "react-router-dom";
import { Suspense } from "react";
import router from "./router";
import { ScaleProvider, useScale } from "./contexts/ScaleContext";
import { RotateHint } from "./components/RotateHint";

/**
 * 应用内容组件
 * 使用 useScale 获取缩放样式
 */
function AppContent() {
  const { scaleStyle } = useScale();

  return (
    <>
      <div className="relative w-screen h-screen overflow-hidden">
        <div
          style={{
            ...scaleStyle,
            overflow: "hidden",
          }}
        >
          <Suspense fallback={<div>Loading...</div>}>
            <RouterProvider router={router} />
          </Suspense>
        </div>
      </div>
      <RotateHint />
    </>
  );
}

/**
 * 应用根组件
 * ScaleProvider 自动处理所有缩放逻辑
 */
function App() {
  return (
    <ScaleProvider>
      <AppContent />
    </ScaleProvider>
  );
}

export default App;