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

export default function Titre({session, titreId, contenu}) {
  return (
    <Box p={1} marginBlock={1} sx={{display: 'flex', alignItems: 'center'}}>
      <Typography sx={{textDecoration: 'underline'}} fontWeight='bold'>{contenu}</Typography>
      {session && (
        <Edit session={session} id={titreId} contenu={contenu} collection='titres' />
      )}
    </Box>
  )
}

Titre.propTypes = {
  session: PropTypes.object,
  titreId: PropTypes.string.isRequired,
  contenu: PropTypes.string.isRequired
}