import React from 'react';

import { IconWrapper, ClickZone } from './styled';
import data from './data';

type Props = {
  id?: string;
  glyph: string;
  onClick?: (e: any) => void;
  onBlur?: () => void;
  style?: {};
  isActive?: boolean;
  isDisabled?: boolean;
};

const Icon: React.FC<Props> = ({
  glyph,
  id = '',
  onClick,
  onBlur,
  style,
  isActive = false,
  isDisabled = false,
}: Props) => {
  const { Normal, Hover } = data[glyph];

  return (
    <IconWrapper isHover={!!Hover} style={style} isDisabled={isDisabled}>
      {Normal && <Normal data-status="normal" />}
      {Hover && <Hover data-status="hover" />}
      {isActive && Hover ? <Hover data-status="active" /> : null}
      <ClickZone
        id={id}
        onMouseDown={
          isDisabled
            ? (): void => {
                // do something
              }
            : onClick
        }
        onBlur={onBlur}
      />
    </IconWrapper>
  );
};

export default Icon;