import {
  IonContent,
  IonButton,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonCard,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonNavLink,
  IonFooter,
  IonTabButton,
  IonIcon,
  IonLabel,
  IonImg
} from '@ionic/react';
import { square } from 'ionicons/icons';
import './HomePage.css';
import ListBiographies from './ListBiographies';
import AboutUs from './AboutUs';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';

const HomePage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home Page</IonTitle>
          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>Biography</IonCardTitle>
            <IonCardSubtitle>Search for all Biographies</IonCardSubtitle>
          </IonCardHeader>
          <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
            <IonButton size="default" expand="block" shape="round">
              Go to
            </IonButton>
          </IonNavLink>
        </IonCard>
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>Capsule</IonCardTitle>
            <IonCardSubtitle>Search for all Capsule</IonCardSubtitle>
          </IonCardHeader>
          <IonButton size="default" expand="block" shape="round">Go to</IonButton>
        </IonCard>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
            <IonTabButton tab="AboutUs" href="/AboutUs">
              <IonIcon icon={square} />
              <IonLabel>About Us</IonLabel>
            </IonTabButton>
          </IonNavLink>
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};

export default HomePage;