import React from 'react';
import { Route } from 'react-router-dom';
import Layout from '@/components/Layout';
import menuItems from '@/data/menuItems';
import { lazyImport, withSuspense } from '@/utils/lazyImport';

/**
 * [라우팅 규칙]
 * - menuItems의 경로(href)는 모두 소문자여야 하며,
 * - 실제 컴포넌트 파일명은 PascalCase (대문자 시작)를 따라야 합니다.
 * - 예: menuItems에 "about/ceo" → 실제 파일: src/pages/about/Ceo.tsx
 *
 * 자동 라우팅이므로 규칙을 따르지 않으면 컴포넌트를 불러올 수 없습니다.
 */

export const renderRoutesFromMenu = () => {
  return menuItems.map((parent) => {
    const parentPath = parent.href.replace(/^\//, '');

    return (
      <Route key={parent.href} path={parentPath} element={<Layout />}>
        {parent.children.map((child) => {
          const childPath = child.href.replace(/^\//, '');
          const fullPath = `${parentPath}/${childPath}`;
          const Component = lazyImport(fullPath);
          return (
            <Route
              key={child.href}
              path={childPath}
              element={withSuspense(Component)}
            />
          );
        })}
      </Route>
    );
  });
};
