import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconAlertTriangle} from '@tabler/icons-react-native';
import {Avatar, BottomModalFooter, Title} from '@components';
import {Navigation} from '@interfaces/navigation';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

import {styles} from './styles';

function ServiceInMaintenance({
  navigation,
  route: {params},
}: Navigation<Screens.SERVICE_IN_MAINTENANCE>) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const onExit = () => {
    navigation.pop(params?.popQuantity || 1);
  };

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <View style={styles.content}>
        <Avatar
          Icon={IconAlertTriangle}
          size="md"
          style={styles.avatar}
          variant="warning"
        />
        <Title
          center
          description={t('in_maintenance.service_in_maintenance_description')}
          descriptionNumberOfLines={2}
          size="m"
          title={t('in_maintenance.service_in_maintenance')}
        />
      </View>
      <BottomModalFooter
        footer={{primaryButton: {text: t('general.exit'), onPress: onExit}}}
      />
    </View>
  );
}

export default ServiceInMaintenance;