import {
  IonImg,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonSearchbar,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonFooter,
  IonGrid,
  IonRow,
  IonCol,
  IonButtons,
  IonBackButton,
  IonItem,
  IonIcon
} from '@ionic/react';
import './ListBiographies.css';
import { square } from 'ionicons/icons';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';
import RobertoClemente from '../assets/RobertoClemente.jpg';
import ListBio from '../data/Biograph.json';

const ListBiographies: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonGrid fixed={true}>
            <IonRow>
              <IonCol></IonCol>
              <IonCol>
                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
                <IonTitle>Lista de Biografías</IonTitle>
              </IonCol>
              <IonCol></IonCol>
            </IonRow>
          </IonGrid>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonSearchbar></IonSearchbar>

        {
          ListBio && ListBio.map(listbio => {
            return (
              <>
                <IonItem routerLink={`/Biographie/${listbio.id}`} detail={true}>
                  <IonCard>
                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
                    <IonCardHeader>
                      <IonCardTitle>{listbio.title}</IonCardTitle>
                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
                    </IonCardHeader><IonCardContent>
                      {listbio.content}
                    </IonCardContent>
                  </IonCard>
                </IonItem>
                <IonItem routerLink={`/Question`} detail={true}>
                  <IonIcon icon={square} />Tomar quiz
                </IonItem>
              </>
            )
          })
        }
      </IonContent>
      <IonFooter>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/home"></IonBackButton>
          </IonButtons>
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};

export default ListBiographies;