import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Paper from '@mui/material/Paper'
import {formatKonstitisyon} from '../../lib/format.js'
import Titre from './titre.js'
import Article from './article.js'

export default function Konstitisyon({titres, articles}) {
  const konstitisyon = formatKonstitisyon(titres, articles)

  return (
    <Box>
      {konstitisyon.map(({titreId, titre, articles}) => (
        <Paper key={titreId} variant='outlined' sx={{p: 1, marginBlock: 2}} p={2} >
          <Titre titre={titre} />
          {articles.map(({id, numero, contenu}) => (
            <Article key={id} numero={numero} contenu={contenu} />
          ))}
        </Paper>
      ))}
    </Box>
  )
}

Konstitisyon.propTypes = {
  titres: PropTypes.object.isRequired,
  articles: PropTypes.object.isRequired
}