import { Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';

// 구현 영역 - 레이아웃
import MainLayout from './components/layout/MainLayout';
import { ToastContainer } from './components/common/Toast';

// 퍼블리시 영역 (개발 환경에서만 동적 로드)
// 프로덕션 빌드 시 tree-shaking으로 제외됨
const PublishRouter = import.meta.env.DEV
  ? lazy(() => import('./publish'))
  : null;

export default function App() {
  return (
    <>
    <ToastContainer />
    <Routes>
      {/* =====================
          구현 영역 (메인)
          - 모든 메뉴 경로를 MainLayout으로 처리
      ===================== */}
      <Route path="/*" element={<MainLayout />} />

      {/* =====================
          퍼블리시 영역 (개발 환경 전용)
          /publish/* 로 접근하여 퍼블리시 결과물 미리보기
          프로덕션 빌드 시 이 라우트와 관련 모듈이 제외됨
      ===================== */}
      {import.meta.env.DEV && PublishRouter && (
        <Route
          path="/publish/*"
          element={
            <Suspense fallback={<div style={{ color: '#fff', padding: '2rem' }}>Loading publish...</div>}>
              <PublishRouter />
            </Suspense>
          }
        />
      )}
    </Routes>
    </>
  );
}
