import React from 'react';
import {View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconInfoSquareRounded,
  IconInfoTriangle,
} from '@tabler/icons-react-native';
import {Avatar, AvatarSize, Button, Title} from '@components';

import {styles} from './styles';

interface Props {
  body: string;
  onPressRetry?: () => void;
  style?: ViewStyle;
  title: string;
  variant?: 'info' | 'error';
  avatarSize?: AvatarSize;
}

export function ServiceManagementErrorMessage({
  body,
  onPressRetry,
  style,
  title,
  variant = 'info',
  avatarSize = 'lg',
}: Props) {
  const {t} = useTranslation();

  return (
    <View style={[styles.container, style]}>
      {variant === 'info' ? (
        <Avatar
          Icon={IconInfoSquareRounded}
          size={avatarSize}
          variant="primary"
        />
      ) : (
        <Avatar Icon={IconInfoTriangle} size={avatarSize} variant="error" />
      )}
      <Title
        title={title}
        titleNumberOfLines={2}
        description={body}
        descriptionNumberOfLines={2}
        center
      />
      {onPressRetry && (
        <Button
          text={t('service_management.try_again')}
          onPress={onPressRetry}
          variant="secondary"
          size="sm"
        />
      )}
    </View>
  );
}