import React, { useMemo } from 'react';
import styled from 'styled-components';
import { getSVG } from 'Components/utils/types/iconTypes';
import { grayColor } from 'Themes/utils/colorPickers';

export default (icon, size, styles) =>
  useMemo(() => 
    () => {
      if (!icon) {
        return null;
      }

      const Icon = styled(getSVG(icon))`
        fill: ${grayColor};
        position: absolute;
        ${styles}
      `;
      return <Icon width={size} height={size} />;
    },
    [icon, size, styles],
  );
