import React from 'react';

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

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

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

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

export default Icon;