import React, { useContext } from 'react';
import { View } from 'react-native';
import AppContext from '../../AppProvider/AppContext';
import { RSValue } from '../../RFValue';
import { Container, Image, TextTitle } from './PageListingNotFound.style';

export interface IPropsNotFoundListing extends React.ComponentProps<any> {
   image?: any;
}

export const PageListingNotFound: React.FunctionComponent<IPropsNotFoundListing> = ({
   image,
}: IPropsNotFoundListing) => {
   const { imageNotFound } = useContext(AppContext);

   return (
      <Container testID="not-found-listing">
         <View>
            {(image || imageNotFound) && (
               <Image source={image ?? imageNotFound} style={{ width: RSValue(160), height: RSValue(160) }} />
            )}

            <TextTitle>Não encontramos nenhum resultado com esse filtro</TextTitle>
         </View>
      </Container>
   );
};
