import * as React from 'react';
import { string, number, oneOf, oneOfType } from 'prop-types';
import { IconMap } from './IconMap';
import { useTheme } from 'emotion-theming';
import { get } from 'styled-system';

const BorderedIcon = ({ name, size, className, color, ...rest }) => {
  const theme = useTheme();
  const Comp = IconMap[name];
  return Comp ? (
    <Comp
      className={className}
      name={name}
      width={size}
      height={size}
      color={get(theme, `colors.${color}`, color)}
      {...rest}
    />
  ) : null;
};

export default BorderedIcon;

BorderedIcon.propTypes = {
  size: oneOfType([string, number]),
  className: string,
  name: oneOf(Object.keys(IconMap)),
  color: string,
};

BorderedIcon.defaultProps = {
  size: 30,
  className: '',
  name: undefined,
  color: 'currentColor',
};