import React, { useContext } from 'react';
import AppContext from '../../AppProvider/AppContext';
import Style from './PageListingError.style';

export interface IPropsPageErrorLoad extends React.ComponentProps<any> {
   image?: any;
   nonFullscreen?: boolean;
   retry: () => void;
}

export const PageErrorLoad: React.FunctionComponent<IPropsPageErrorLoad> = ({
   image,
   nonFullscreen = false,
   retry,
}: IPropsPageErrorLoad) => {
   const { imagePageError } = useContext(AppContext);

   return (
      <Style data-cy="error-load" nonFullscreen={nonFullscreen}>
         <div className="connection-lost" data-key="error-load">
            <div className="content">
               <img src={image ?? imagePageError} alt="" />

               <h1>Ops...</h1>

               <h4>
                  Houve um erro ao conectar com o <b>Servidor</b>.
                  <br />
                  <br />
                  Verifique sua internet e tente novamente.
               </h4>

               <button className="retry-btn" data-cy="retry-btn" data-testid="retry-btn" onClick={retry} type="button">
                  Tentar novamente
               </button>
            </div>
         </div>
      </Style>
   );
};
