import React from 'react';
import { routes } from '@/config/routes';
import * as AntIcons from '@ant-design/icons';
import { ColorIcon } from '@/components/common/ColorIcon';



const getAntIcon = (iconName) => {
  const iconKey = `${iconName.charAt(0).toUpperCase()}${iconName.slice(
    1
  )}Outlined`;
  return AntIcons[iconKey] ? React.createElement(AntIcons[iconKey]) : null;
};

const generateMenuItems = (routes, parentPath = '') => {
  return routes.map((route) => {
    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
    const icon = route.icon && <ColorIcon icon={getAntIcon(route.icon)} />;

    const menuItem = {
      key: fullPath,
      icon,
      label: route.name,
    };

    if (route.children) {
      menuItem.children = generateMenuItems(route.children, fullPath);
    }

    return menuItem;
  });
};

export const getMenuItems = () => generateMenuItems(routes);