import Avatar from '@material-ui/core/Avatar'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardHeader from '@material-ui/core/CardHeader'
import { withStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import gql from 'graphql-tag'
import React from 'react'

const styles = theme => ({
  comment: {
    marginBottom: theme.spacing.unit
  }
})

const Comment = withStyles(styles)(({comment, classes}) => (
  <Card className={classes.comment}>
    <CardHeader
      avatar={
        <Avatar aria-label={comment.author.name}>
          {comment.author.name[0].toUpperCase()}
        </Avatar>
      }
      title={comment.author.name}
      subheader={comment.author.email}
    />
    <CardContent>
      <Typography component="p">{comment.message}</Typography>
    </CardContent>
  </Card>
))

Comment.fragment = gql`
  fragment Comment on Comment {
    message
    author {
      name
      email
    }
  }
`

export default withStyles(styles)(Comment)