import React from 'react';
import {Keyboard, Pressable, StyleSheet, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconAlertCircle} from '@tabler/icons-react-native';
import {Avatar, Button, Title} from '@components';
import {SPACING} from '@shared/theme';

interface Props {
  title: string;
  description?: string;
  withRetry?: boolean;
  onRetry?: () => void;
  style?: ViewStyle;
}

export function ErrorInfo({
  title,
  description,
  onRetry,
  withRetry,
  style,
}: Props) {
  const {t} = useTranslation();

  return (
    <View style={styles.container}>
      <Pressable onPress={Keyboard.dismiss} style={[styles.content, style]}>
        <Avatar Icon={IconAlertCircle} size="lg" variant="error" />
        <Title title={title} description={description} center />
        {withRetry && (
          <Button
            variant="secondary"
            size="sm"
            text={t('general.try_again')}
            onPress={onRetry}
          />
        )}
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    alignItems: 'center',
    gap: SPACING.x2,
    padding: SPACING.x2,
  },
});