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

import {styles} from './styles';

function LocationMockError({
  navigation,
}: Navigation<Screens.LOCATION_MOCK_ERROR>) {
  const {theme} = useTheme();
  const {t} = useTranslation();

  useTimeoutHandler();

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <View style={styles.cardOuter}>
        <CardContainer style={styles.topContainer}>
          <Avatar Icon={IconCircleX} variant="error" />
          <Title
            center
            description={t('time_tracker.access_blocked_location_description')}
            descriptionNumberOfLines={4}
            title={t('time_tracker.access_blocked_location')}
          />
        </CardContainer>
      </View>
      <BottomModalFooter
        footer={{
          primaryButton: {onPress: navigation.goBack, text: t('general.exit')},
        }}
      />
    </View>
  );
}

export default LocationMockError;