import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'client/routes'
import { withStyles } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
import Grid from '@material-ui/core/Grid'

const styles = theme => ({
  paper: {
    textAlign: 'center',
    color: theme.palette.text.secondary,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
  },
  title: {
    padding: theme.spacing.unit,
    margin: 0,
  },
  image: {
    width: 240,
    height: 180,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundSize: 'cover',
  },
})

function AlbumGrid({ classes, albums }) {
  return (
    <div style={{padding: 20}} >
      <Grid justify='center' container spacing={24}>
        {albums.map(album => (
          <Grid item key={album.id}>
            <Link route='album' params={{slug: album.slug}}>
              <a>
                <Paper className={classes.paper}>
                  <div
                    title={album.cover_photo.alt}
                    style={{backgroundImage: `url(${album.cover_photo.urls.mobile_sm})`}}
                    className={classes.image} />
                  <h3 className={classes.title}>{album.title}</h3>
                </Paper>
              </a>
            </Link>
          </Grid>
        ))}
      </Grid>
    </div>
  )
}

AlbumGrid.propTypes = {
  classes: PropTypes.object.isRequired,
  albums: PropTypes.arrayOf(PropTypes.object).isRequired,
}

export default withStyles(styles)(AlbumGrid)

@@ -345,27 +345,17 @@
    w
-hiteSpace: 'nowrap'
+idth: 240
 ,%0A  

Fix long album names