import React, { memo } from 'react';
import * as Icon from '@ant-design/icons';
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
import { AntdIconType } from './icon';
import { IIconConfig } from './schema';
import logo from '@/assets/icon_01.png';

interface IconType extends IIconConfig {
  isTpl?: boolean;
}
const XIcon = memo((props: IconType) => {
  const { color, size, link, text, fontSize, fontColor, type, spin, isTpl } = props;

  const MyIcon: React.ForwardRefExoticComponent<Pick<AntdIconProps, AntdIconType> &
    React.RefAttributes<HTMLSpanElement>> = Icon[type];

  const handleClick = () => {
    if (!link || window.location.href.indexOf('/editor') > -1) return;
    window.location.href = link;
  };

  return isTpl ? (
    <div>
      <img style={{ width: '100%' }} src={logo} alt="" />
    </div>
  ) : (
    <div
      style={{
        display: 'flex',
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
      }}
    >
      <MyIcon twoToneColor={color} style={{ fontSize: size }} spin={spin} onClick={handleClick} />
      <div style={{ fontSize, color: fontColor, paddingTop: '6px' }}> {text} </div>
    </div>
  );
});

export default XIcon;