import {
  IonImg,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonSearchbar,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
  IonNavLink,
  IonFooter,
  IonTabButton,
  IonIcon
} from '@ionic/react';
import { arrowBack } from 'ionicons/icons';
import './ListBiographies.css';
import Biography from './Biography';
import Questions from './Questions';
import HomePage from './HomePage';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';
import RobertoClemente from '../assets/RobertoClemente.jpg';

const ListBiographies: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
          <IonTitle>Lista de Biografías</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonSearchbar></IonSearchbar>
        <IonCard>
          <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
          <IonCardHeader>
            <IonCardTitle>Roberto Clemente</IonCardTitle>
            <IonCardSubtitle>Tabs: Deportista</IonCardSubtitle>
          </IonCardHeader>

          <IonCardContent>
            Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.
          </IonCardContent>

          <IonNavLink routerDirection="forward" component={() => <Biography />}>
            <IonButton>Go to</IonButton>
          </IonNavLink>

          <IonNavLink routerDirection="forward" component={() => <Questions />}>
            <IonButton>Tomar quiz</IonButton>
          </IonNavLink>

        </IonCard>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
            <IonTabButton tab="HomePage" href="/HomePage">
              <IonIcon icon={arrowBack} />
            </IonTabButton>
          </IonNavLink>
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};

export default ListBiographies;