// components/icons/DynamicIcon.tsx
import React from "react";
import * as TablerIcons from "@tabler/icons-react";

export interface DynamicIconProps {
  iconName: string;
  size?: number;
  color?: string;
  className?: string;
  stroke?: number;
}

/**
 * 🔥 DynamicIcon - Reusable component untuk merender ikon @tabler/icons-react secara dinamis
 * @param iconName - Nama ikon (harus sesuai dengan nama ikon dari @tabler/icons-react, contoh: "IconUsers")
 * @param size - Ukuran ikon (default: 24)
 * @param color - Warna ikon (opsional)
 * @param className - CSS class tambahan (opsional)
 * @param stroke - Ketebalan garis (opsional, default dari library)
 */
const DynamicIcon: React.FC<DynamicIconProps> = ({
  iconName,
  size = 32,
  color,
  className = "IconAlertHexagon",
  stroke,
}) => {
  // Safety check: Ensure the iconName exists in TablerIcons
  if (!(iconName in TablerIcons)) {
    console.warn(`Icon "${iconName}" not found in @tabler/icons-react library`);
    return null;
  }

  const IconComponent = TablerIcons[
    iconName as keyof typeof TablerIcons
  ] as React.ComponentType<{
    size?: number;
    color?: string;
    className?: string;
    stroke?: number;
  }>;

  return (
    <IconComponent
      size={size}
      color={color}
      className={className}
      stroke={stroke}
    />
  );
};

export default DynamicIcon;