import React from 'react';
import PropTypes from 'prop-types';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

import icon from '../../../../style/images/Icons-01.svg';

const styles = theme => ({
  card: {
    height: theme.spacing.unit * 36,
    paddingTop: theme.spacing.unit * 4,
    textAlign: 'center',
    '&:hover': {
      backgroundColor: 'orange'
    },
  },
  media: {
    height: theme.spacing.unit * 12,
    width: theme.spacing.unit * 12,
    backgroundSize: 'contain',
    margin: `${theme.spacing.unit * 2}px auto`,
  },
});

const ControlPanelCard = ({
  image, imageTitle, headline, message, onClick, classes
}) => (
  <Grid item xs={12} md={4} onClick={onClick}>
    <Card className={classes.card}>
      <CardMedia
        className={classes.media}
        image={image}
        title={imageTitle}
        src="img"
      />

      <CardContent>
        <Typography variant="headline">
          {headline}
        </Typography>
        <Typography variant="body2">
          {message}
        </Typography>
      </CardContent>
    </Card>
  </Grid>
);

ControlPanelCard.propTypes = {
  image: PropTypes.string,
  imageTitle: PropTypes.string,
  headline: PropTypes.string,
  message: PropTypes.string,
};

ControlPanelCard.defaultProps = {
  image: icon,
  imageTitle: 'Image Title',
  headline: 'Headline',
  message: 'A message that explains the card and what it does',
};

export default withStyles(styles)(ControlPanelCard);