import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { sizeInfo } from './style'

// See https://www.flaticon.com/packs/free-basic-ui-elements

@Radium
export class Icon extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    size: PropTypes.number,
    margin: PropTypes.number,
    style: PropTypes.object,
  }

  static defaultProps = {
    size: 50,
    margin: sizeInfo.iconDefaultMargin,
  }

  static svgs = {
    logout: require('icons/logout.svg'),
    thumb: require('icons/thumb.svg'),
    profile: require('icons/profile.svg'),
    admin: require('icons/admin.svg'),
    hand: require('icons/hand.svg'),
    users: require('icons/users.svg'),
    teams: require('icons/teams.svg'),
    system: require('icons/system.svg'),
    confirmed: require('icons/confirmed.svg'),
    help: require('icons/help.svg'),
    warning: require('icons/warning.svg'),
    edit: require('icons/edit.svg'),
    placeholder: require('icons/placeholder.svg'),
  }

  render() {
    let { size, name, margin, style } = this.props
    let source = Icon.svgs[name] || Icon.svgs['placeholder']

    size -= margin * 2

    return <img style={[{ width: size, height: size, margin }, style]} src={source} />
  }
}