import React from 'react'
import PropTypes from 'prop-types'

import {makeStyles} from '@material-ui/core/styles'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}))

export default function MizikLis({miziks}) {
  const classes = useStyles()

  return (
    <List component='nav' className={classes.root} aria-label='mizik'>
      {miziks.map(m => (
        <ListItem key={m._id} button>
          <ListItemText primary={m.titre} />
        </ListItem>
      ))}
    </List>
  )
}

MizikLis.propTypes = {
  miziks: PropTypes.array.isRequired
}