import React, { useContext } from 'react';
import AppContext from '../AppProvider/AppContext';
import * as S from './PageListingNotFound.style';
import { PageListingNotFoundImage } from './PageListingNotFoundImage';

export interface IPropsNotFoundListing  {
   image?: any;
}

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

   return (
      <S.Container>
         <div className="not-found text-center">
            <div className="icon">
               {!image && !imageNotFound && PageListingNotFoundImage()}
               {(!!image || !!imageNotFound) && <img src={image ?? imageNotFound} width="150px" />}
            </div>

            <h3>Não encontramos nenhum resultado com esse filtro</h3>
         </div>
      </S.Container>
   );
};
