import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Edit from './edit.js'

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

  return (
    <Box textAlign='justify' p={0.5}>
      <Box sx={{display: 'flex', alignItems: 'center'}}>
        <Typography marginBlock={1} fontWeight='bold'>{!numero || numero === 0 ? 'Article ...' : `Article ${numero}`}</Typography>
        {session && (
          <Edit session={session} article={articleId} />
        )}
      </Box>

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

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