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

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

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

class IconText extends React.Component {

  render() {
    const { classes, variant, text } = this.props;
    const Icon = variantIcon[variant];
    return (
      <Grid container className={classes.root}>
        <Grid item xs={1}>
          <Icon className={classes.icon} />
        </Grid>
        <Grid item xs={9}>
          <Typography className={classes.text}>{text}</Typography>
        </Grid>
      </Grid>
    );
  }
}

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

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