import React from 'react';
import { RFValue } from 'react-native-responsive-fontsize';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { Button } from '../../Button/native';
import { Container, TextP, RetryBtn, RetryTextBtn } from './PageListingErrorLoadMore.style';

export interface IPropsPageListingErrorLoadMore extends React.ComponentProps<any> {
   retry: () => void;
}

export const PageListingErrorLoadMore: React.FunctionComponent<IPropsPageListingErrorLoadMore> = ({
   retry,
}: IPropsPageListingErrorLoadMore) => {
   return (
      <Container testID="error-load-more">
         <TextP>Houve um erro ao carregar mais resultados</TextP>

         <RetryBtn testID="retry-load-more-btn" onPress={retry}>
            <Button onPress={retry}>
               <FontAwesomeIcon icon={faRedo} color="white" size={RFValue(14)} />
               &nbsp;&nbsp;&nbsp; Tentar novamente
            </Button>
         </RetryBtn>
      </Container>
   );
};
