1import Typography from '@mui/material/Typography';
 2import Box from '@mui/material/Box';
 3import {useTranslation} from 'react-i18next';
 4import ContentSwitch from './ContentSwitch';
 5
 6interface Props {
 7  toggleNotification: () => void;
 8  toggleNewsletter: () => void;
 9  notificationChecked: boolean;
10  newsletterChecked: boolean;
11  isEditing: boolean;
12}
13
14const ManagingNotificationsField = ({
15  isEditing,
16  toggleNotification,
17  toggleNewsletter,
18  notificationChecked,
19  newsletterChecked,
20}: Props) => {
21  const {t} = useTranslation();
22
23  return (
24    <Box px={2}>
25      <Box display="flex" alignItems="center" justifyContent="space-between">
26        <Typography variant="h6">{t('profile.notification.label')}</Typography>
27        <ContentSwitch
28          isEditing={isEditing}
29          checked={notificationChecked}
30          onChange={toggleNotification}
31          trueLabel="profile.notification.value.yes"
32          falseLabel="profile.notification.value.no"
33          t={t}
34        />
35      </Box>
36      <Box display="flex" alignItems="center" justifyContent="space-between">
37        <Typography variant="h6">{t('profile.newsletter.label')}</Typography>
38        <ContentSwitch
39          isEditing={isEditing}
40          checked={newsletterChecked}
41          onChange={toggleNewsletter}
42          trueLabel="profile.newsletter.value.yes"
43          falseLabel="profile.newsletter.value.no"
44          t={t}
45        />
46      </Box>
47    </Box>
48  );
49};
50
51export default ManagingNotificationsField;