import {
  IonImg,
  IonContent,
  IonHeader,
  IonTitle,
  IonPage,
  IonToolbar,
  IonFooter,
  IonNavLink,
  IonTabButton,
  IonIcon,
  IonGrid,
  IonRow,
  IonCol
} from '@ionic/react';
import { arrowBack } from 'ionicons/icons';
import React from 'react';
import './AboutUs.css';
import HomePage from './HomePage';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';

const AboutUs: 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>Más sobre nosotros</IonTitle>
              </IonCol>
              <IonCol></IonCol>
            </IonRow>
          </IonGrid>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen className="ion-padding">
        <h1>Enciclopedia PR</h1>
        <h2>Más sobre nosotros:</h2>
        <p>Para más información sobre EnciclopediaPR, visite la página href='https://enciclopediapr.org/'</p>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
            <IonTabButton tab="HomePage" href="/HomePage">
              <IonIcon icon={arrowBack} />
            </IonTabButton>
          </IonNavLink>
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};

export default AboutUs;