import { Dialog, DialogTitle, Box, Typography } from '@mui/material'
import { useTranslation } from 'next-i18next'

export default function HelpModal ({ open, onClose }) {
  const { t } = useTranslation('home')

  return (
    <Dialog
      open={open}
      onClose={onClose}
    >
      <DialogTitle>
        {t('help_header')}
      </DialogTitle>
      <Box
        sx={{
          p: 3
        }}
      >
        <Typography gutterBottom>
          {t('help_body_1')}
        </Typography>
        <Typography gutterBottom>
          {t('help_body_2')}
        </Typography>
        <Typography gutterBottom>
          {t('help_body_3')}
        </Typography>
      </Box>
    </Dialog>
  )
}