import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import InputLabel from '@mui/material/InputLabel'
import FormControl from '@mui/material/FormControl'
import NativeSelect from '@mui/material/NativeSelect'

export default function ListItems({items, selectLabel, selectValue, setSelectValue}) {
  const handleChange = event => {
    setSelectValue(event.target.value)
  }

  return (
    <Box sx={{minWidth: 120, marginBlock: 5}}>
      <FormControl fullWidth>
        <InputLabel variant='standard' htmlFor='titre'>
          {selectLabel}
        </InputLabel>
        <NativeSelect
          value={selectValue}
          inputProps={{
            name: 'content',
            id: 'titre',
          }}
          onChange={handleChange}
        >
          {items.map(({id, contenu}) => (
            <option key={id} value={id}>{contenu}</option>
          ))}
        </NativeSelect>
      </FormControl>
    </Box>
  )
}

ListItems.propTypes = {
  items: PropTypes.array.isRequired,
  selectLabel: PropTypes.string.isRequired,
  selectValue: PropTypes.string.isRequired,
  setSelectValue: PropTypes.func.isRequired
}