import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconAlertTriangle} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export function ChatMaintenance() {
  const {t} = useTranslation();
  const {theme} = useTheme();
  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <View
        style={[
          styles.iconContainer,
          {backgroundColor: theme.background.feedback.warning},
        ]}>
        <IconAlertTriangle color={theme.text.feedback.warning} />
      </View>
      <View style={styles.textContainer}>
        <Typography weight={'semiBold'} variant={'l'} style={styles.text}>
          {t('chat.chat_maintenance.title')}
        </Typography>
        <Typography
          variant={'m'}
          color={theme.text.neutral.lighter}
          style={styles.text}>
          {t('chat.chat_maintenance.description')}
        </Typography>
      </View>
    </View>
  );
}
