/**
 * KRA - SVG Icon Component
 * Render SVG icons from local or iconify
 */
import React from 'react';
import * as AntdIcons from '@ant-design/icons';

interface SvgIconProps {
  icon?: string;
  localIcon?: string;
  className?: string;
  style?: React.CSSProperties;
  size?: number | string;
  color?: string;
  onClick?: () => void;
}

const SvgIcon: React.FC<SvgIconProps> = ({
  icon,
  localIcon,
  className,
  style,
  size = '1em',
  color,
  onClick,
}) => {
  // Try to use Ant Design icon
  if (icon) {
    const IconComponent = (AntdIcons as any)[icon] || (AntdIcons as any)[`${icon}Outlined`];
    if (IconComponent) {
      return (
        <IconComponent
          className={className}
          style={{
            fontSize: typeof size === 'number' ? `${size}px` : size,
            color,
            ...style,
          }}
          onClick={onClick}
        />
      );
    }
  }

  // Use local SVG symbol
  if (localIcon) {
    return (
      <svg
        aria-hidden="true"
        className={className}
        style={{
          width: typeof size === 'number' ? `${size}px` : size,
          height: typeof size === 'number' ? `${size}px` : size,
          fill: color || 'currentColor',
          ...style,
        }}
        onClick={onClick}
      >
        <use xlinkHref={`#${localIcon}`} />
      </svg>
    );
  }

  return null;
};

export default SvgIcon;
