// @flow
import React from 'react';
import { Platform } from 'react-native';
// $FlowFixMe
import MaterialIcon from 'react-native-vector-icons/dist/MaterialIcons';
// $FlowFixMe
import iconFont from 'react-native-vector-icons/Fonts/MaterialIcons.ttf';
import { colors } from '../Utils/Theme';

type Props = {
  color: string,
  name: string,
  size: number,
};

const Icon = ({ color, name, size }: Props) => (
  <MaterialIcon color={color} name={name} size={size} />
);

Icon.defaultProps = {
  color: colors.black(38),
  name: '',
  size: 24,
};

export default Icon;

/* istanbul ignore else */
if (Platform.OS === 'web') {
  const iconFontStyles = `@font-face {
    src: url(${iconFont});
    font-family: "Material Icons";
  }`;

  const style = document.createElement('style');
  style.type = 'text/css';
  style.textContent = iconFontStyles;
  // $FlowFixMe
  document.head.appendChild(style);
}
