"use client";

import React, { type SVGProps } from 'react'
import { IconBaseProps, IconType } from 'react-icons';

import { FaRegIdCard, FaStethoscope } from "react-icons/fa";
import { LuLayoutDashboard, LuClipboardList  } from "react-icons/lu";
import { IoDocumentsOutline } from "react-icons/io5";
import { BsClipboardCheck } from "react-icons/bs";
import { TbProgress } from "react-icons/tb";

interface iconMapType {
    [key: string]: IconType
}

const iconMap: iconMapType = {
  FaRegIdCard: FaRegIdCard,
  FaStethoscope: FaStethoscope,
  LuLayoutDashboard: LuLayoutDashboard,
  LuClipboardList: LuClipboardList,
  IoDocumentsOutline: IoDocumentsOutline,
  BsClipboardCheck: BsClipboardCheck,
  TbProgress: TbProgress
};

type DynamicIconProps = IconBaseProps & {
  iconName: string;
};

// interface DynamicIconProps {
//   iconName: string;
// };

const DynamicIcon: React.FC<DynamicIconProps> = ({ iconName, ...props }) => {
    const IconComponent = iconMap[iconName];

    if (!IconComponent) {
        console.warn(`Icon "${iconName}" not found in iconMap.`);
        return null; // Or render a fallback icon
    }

    return React.createElement(IconComponent, props);
};

export default DynamicIcon;