const React = require('react');
const { connect } = require('react-redux');
const { themeStyle } = require('../theme.js');

class IconButton extends React.Component {

	render() {
		const style = this.props.style;
		const theme = themeStyle(this.props.theme);
		const iconStyle = {
			color: theme.color,
			fontSize: theme.fontSize * 1.4,
		};
		const icon = <i style={iconStyle} className={"fa " + this.props.iconName}></i>

		const rootStyle = Object.assign({
			display: 'flex',
			textDecoration: 'none',
			padding: 10,
			width: theme.buttonMinHeight,
			height: theme.buttonMinHeight,
			boxSizing: 'border-box',
			alignItems: 'center',
			justifyContent: 'center',
			backgroundColor: theme.backgroundColor,
			cursor: 'default',
		}, style);

		return (
			<a href="#" style={rootStyle} className="icon-button" onClick={() => { if (this.props.onClick) this.props.onClick() }}>
				{ icon }
			</a>
		);
	}

}

module.exports = { IconButton };