import {
    IonPage,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonFooter,
    IonImg,
    IonGrid,
    IonRow,
    IonCol,
    IonButtons,
    IonBackButton,
    useIonViewWillEnter
} from '@ionic/react';
import { useParams } from 'react-router';
import React, { useState } from 'react';
import './Capsule.css';
import { CapsuleInfo, getCapsule} from '../data/CapsuleInfo';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';

const Capsule: React.FC = () => {
    const [capinfo, setCapsule] = useState<CapsuleInfo>();
    const params = useParams<{ id: string }>();

    useIonViewWillEnter(() => {
        const capsule = getCapsule(parseInt(params.id, 10));
        setCapsule(capsule);
    });

    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>Cápsula</IonTitle>
                            </IonCol>
                            <IonCol></IonCol>
                        </IonRow>
                    </IonGrid>
                </IonToolbar>
            </IonHeader>

            <IonContent fullscreen className="ion-padding">
            {capinfo ? (
                    <>
                        <IonImg style={{ height: 300, width: 600 }} src={capinfo.photo} alt='Logo'></IonImg>
                        <h1>{capinfo.title}</h1>

                        <p>{capinfo.content}</p>
                    </>
                ) : (
                    <div>Capsule not found</div>
                )}
            </IonContent>

            <IonFooter>
                <IonToolbar className="Footer-Color">
                    <div className='Item-Center'>
                        <IonButtons slot="start">
                            <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
                        </IonButtons>
                    </div>
                </IonToolbar>
            </IonFooter>
        </IonPage>
    );
};

export default Capsule;