import React, { useEffect } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButtons, IonBackButton, useIonViewWillEnter, IonButton } from '@ionic/react';
import { Route } from 'react-router';

interface OtherPageProps {
}

const OtherPage: React.FC<OtherPageProps> = () => {

  useIonViewWillEnter(() => {
    console.log('IVWE on otherpage');
    
  })

  useEffect(() => {
    console.log('Other Page mount');
    return () => console.log('Other Page unmount');
  }, []);

  return (
    // <IonRouterOutlet id="other" ionPageContainer>
    //   <Route path="/otherpage" render={() => (
      <IonPage data-pageid="other-page">
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start">
              <IonBackButton />
            </IonButtons>
            <IonTitle>OtherPage</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonButton routerLink="/routing/tabs/tab3">Go to tab3</IonButton>
        </IonContent>
      </IonPage>
    //   )}></Route>
    // </IonRouterOutlet>
  );
};

export default OtherPage;