import PropTypes from 'prop-types'
import ToggleButton from '@mui/material/ToggleButton'
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
import Typography from '@mui/material/Typography'
import {Box} from '@mui/material'

export default function Montant({selectedMontant, setSelectedMontant, validMontant, prices}) {
  const handleChange = (event, newMontant) => {
    setSelectedMontant(newMontant)
  }

  return (
    <Box>
      <Typography marginTop={1} variant='caption' component='div'>
        Choisir un montant
      </Typography>
      <ToggleButtonGroup
        exclusive
        disabled={Boolean(validMontant)}
        size='large'
        color='primary'
        value={selectedMontant}
        onChange={handleChange}
      >
        {prices.map(r => (
          <ToggleButton key={r.id} value={r.id}>{r.unit_amount / 100} €</ToggleButton>
        ))}

      </ToggleButtonGroup>
    </Box>
  )
}

Montant.defaultProps = {
  selectedMontant: null,
  validMontant: null
}

Montant.propTypes = {
  selectedMontant: PropTypes.string,
  setSelectedMontant: PropTypes.func.isRequired,
  validMontant: PropTypes.string,
  prices: PropTypes.array.isRequired
}