import React from 'react';
import {useTranslation} from 'react-i18next';
import {IconMailUp} from '@tabler/icons-react-native';
import {ListItem, Toggle} from '@components';
import {useNotificationConfig} from '@modules/notificationsCenter/hooks';
import {NotificationConfigMode} from '@modules/notificationsCenter/interfaces';

function NotificationEmailItem() {
  const {t} = useTranslation();
  const {isEmailEnabled, toggleEnabled} = useNotificationConfig({
    mode: NotificationConfigMode.EMAIL,
  });

  return (
    <ListItem
      title={t(
        'notifications_center.notification_channels.email_notifications',
      )}
      description={t(
        'notifications_center.notification_channels.email_notifications_description',
      )}
      presentation="card"
      isFirstItem
      isLastItem
      avatar={{Icon: IconMailUp, variant: 'primary'}}
      descriptionNumberOfLines={2}>
      <Toggle value={isEmailEnabled} onToggle={toggleEnabled} />
    </ListItem>
  );
}

export default NotificationEmailItem;