import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Button from './Button';
import ButtonIcon from './ButtonIcon';

class IconButton extends Component {
  static propTypes = {
    icon: PropTypes.any.isRequired,
    semantic: PropTypes.string.isRequired,
    dimension: PropTypes.oneOf(['small']),
  };
  static defaultProps = {
    dimension: undefined,
  };

  render() {
    // Extract the modifier props
    // eslint-disable-next-line no-unused-vars, react/prop-types
    const { icon, semantic, dimension, modifier, ...props } = this.props;

    return (
      <Button modifier="iconButton" dimension={dimension} {...props}>
        <ButtonIcon icon={icon} semantic={semantic} dimension={dimension} />
      </Button>
    );
  }
}

export default IconButton;