/* eslint-disable  @typescript-eslint/no-explicit-any */
import React, { CSSProperties } from 'react'
import * as icons from '../../libs/index'

export type IconProps = {
  className?: string,
  color?: string,
  direction?: number,
  onClick?: () => void,
  refIcon: any,
  size?: number | string,
  styles?: CSSProperties,
}

export const Icon: React.FC<IconProps> = ({
  className,
  color,
  direction,
  onClick,
  refIcon,
  size,
  styles,
}) => (
  <div
    className={className || 'icon-container'}
    onClick={onClick}
    onKeyDown={onClick}
    style={{
      fill: color,
      height: size,
      transform: `rotate(${direction}deg)`,
      width: size,
      ...styles,
    }}
    aria-hidden='true'
  >
    {
    // @ts-ignore
      React.createElement(icons[refIcon], {})
    }
  </div>
)
