import { Text, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Screen } from '../../src/components/Screen';
import { StateView } from '../../src/components/StateView';
import { BackButton } from '../../src/components/BackButton';
import { color, typography } from '../../src/theme';

export default function NotificationsSettings() {
  const { t } = useTranslation();
  return (
    <Screen>
      <BackButton fallbackHref="/settings/" />
      <Text style={styles.h1}>{t('settings.notifications')}</Text>
      <StateView
        tone="empty"
        title={t('settings.notificationEmptyTitle')}
        body={t('settings.notificationEmptyBody')}
      />
    </Screen>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: typography.scale.h1.size, fontWeight: '700', color: color.ink[900] },
});