import React from 'react';
import PropTypes from "prop-types";
import { withStyles } from '@material-ui/core/styles';
import AssignmentIcon from '@material-ui/icons/Assignment';
import RoomIcon from '@material-ui/icons/Room';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import WatchLater from '@material-ui/icons/WatchLater';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import Typography from '@material-ui/core/Typography';
import Business from '@material-ui/icons/Business';

const variantIcon = {
  assignment: AssignmentIcon,
  room: RoomIcon,
  location_on: LocationOnIcon,
  watch_later: WatchLater,
  business_center: BusinessCenterIcon,
  business: Business,
};

const styles = theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginRight: theme.spacing(1),
  },
  icon: {
    fontSize: '1.1em',
  },
  text: {
    fontSize: '0.9em',
    fontWeight: '200',
  },
});

class IconTextInline extends React.Component {

  render() {
    const { classes, variant, text } = this.props;
    const Icon = variantIcon[variant];
    return (
      <section className={classes.root}>
        <Icon className={classes.icon} />
        <Typography className={classes.text}>{text}</Typography>
      </section>

    );
  }
}

IconTextInline.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
  text: PropTypes.string.isRequired,
};

export default withStyles(styles, { withTheme: true })(IconTextInline);