import {
  IonContent,
  IonHeader,
  IonPage,
  IonToolbar,
  IonCard,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonFooter,
  IonTabButton,
  IonIcon,
  IonLabel,
  IonImg,
  IonCol,
  IonGrid,
  IonRow,
  IonItem
} from '@ionic/react';
import { informationCircleOutline } from 'ionicons/icons';
import './HomePage.css';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';

const HomePage: React.FC = () => {
  return (
    <IonPage>

      <IonHeader>
        <IonToolbar className="Header-Color">
          <IonGrid fixed={true}>
            <IonRow>
              <IonCol></IonCol>
              <IonCol>
                <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
                
              </IonCol>
              <IonCol></IonCol>
            </IonRow>
          </IonGrid>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        <div className='Item-Center'>
          <IonCard>
          <IonItem routerLink={`/ListBiographies`} detail={true}>
              <IonCardHeader>
                <IonCardTitle>Biografías</IonCardTitle>
                <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
              </IonCardHeader>
            </IonItem>
          </IonCard>
        </div>
        <div className='Item-Center'>
          <IonCard>
            <IonItem routerLink={`/ListCapsules`} detail={true}>
              <IonCardHeader>
                <IonCardTitle>Cápsulas</IonCardTitle>
                <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
              </IonCardHeader>
            </IonItem>
          </IonCard>
        </div>
      </IonContent>
      
      <IonFooter>
        <IonToolbar className="Footer-Color">
          <div className='Item-Center'>
            <IonItem routerLink={`/About`} className="Footer-Color">
              <IonTabButton tab="AboutUs" href="/AboutUs">
                <IonIcon icon={informationCircleOutline} />
                <IonLabel>Sobre nosotros</IonLabel>
              </IonTabButton>
            </IonItem>
          </div>
        </IonToolbar>
      </IonFooter>

    </IonPage>
  );
};

export default HomePage;
