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
26        display="flex"
27        alignItems="center"
28        justifyContent="space-between"
29        mb={1}
30      >
31        <Typography variant="h6">{t('profile.notification.label')}</Typography>
32        <ContentSwitch
33          isEditing={isEditing}
34          checked={notificationChecked}
35          onChange={toggleNotification}
36          trueLabel="profile.notification.value.yes"
37          falseLabel="profile.notification.value.no"
38          t={t}
39        />
40      </Box>
41      <Box
42        display="flex"
43        alignItems="center"
44        justifyContent="space-between"
45        mb={1}
46      >
47        <Typography variant="h6">{t('profile.newsletter.label')}</Typography>
48        <ContentSwitch
49          isEditing={isEditing}
50          checked={newsletterChecked}
51          onChange={toggleNewsletter}
52          trueLabel="profile.newsletter.value.yes"
53          falseLabel="profile.newsletter.value.no"
54          t={t}
55        />
56      </Box>
57    </Box>
58  );
59};
60
61export default ManagingNotificationsField;