import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'

export default function Article({numero, contenu}) {
  const formattedContent = contenu.replaceAll('\n', '<br />')

  return (
    <Box textAlign='justify' p={0.5}>
      {numero > 0 && (
        <Typography marginBlock={1} fontWeight='bold'>Article {numero}</Typography>
      )}

      <Typography dangerouslySetInnerHTML={{__html: formattedContent}} />
    </Box>
  )
}

Article.propTypes = {
  numero: PropTypes.number,
  contenu: PropTypes.string.isRequired
}