import {
  IonList,
  IonItem,
  IonLabel,
  IonImg,
  IonSearchbar,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonFooter,
  IonGrid,
  IonRow,
  IonCol,
  IonButtons,
  IonBackButton
} from '@ionic/react';
import './ListCapsules.css';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';
import ListCapsule from '../data/Capsule.json';

const ListCapsules: 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>
                <IonTitle>Lista de Cápsulas de Contenido</IonTitle>
              </IonCol>
              <IonCol></IonCol>
            </IonRow>
          </IonGrid>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonSearchbar></IonSearchbar>
        {
          ListCapsule && ListCapsule.map(listcap => {
            return (
              <>
                <IonList inset={true}>
                  <IonItem routerLink={`/Capsule/${listcap.id}`} detail={true}>
                    <IonLabel>{listcap.title}</IonLabel>
                  </IonItem>
                </IonList>
              </>
            )
          })
        }
      </IonContent>
      <IonFooter>
        <IonToolbar className="Footer-Color">
          <div className='Item-Center'>
            <IonButtons slot="start">
              <IonBackButton defaultHref="/home"></IonBackButton>
            </IonButtons>
          </div>
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};

export default ListCapsules;
