import {
    IonPage,
    IonContent,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonFooter,
    IonImg,
    IonItem,
    IonLabel,
    IonList,
    IonCheckbox,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonCardSubtitle,
    IonCardTitle,
    IonButton,
    IonGrid,
    IonRow,
    IonCol,
    IonButtons,
    IonBackButton
} from '@ionic/react';
import React from 'react';
import './Questions.css';
import EnciclopediaPR from '../assets/EnciclopediaPR.png';
import RobertoClemente from '../assets/RobertoClemente.jpg';

const Questions: 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>Quiz</IonTitle>
                            </IonCol>
                            <IonCol></IonCol>
                        </IonRow>
                    </IonGrid>
                </IonToolbar>
            </IonHeader>

            <IonContent fullscreen className="ion-padding">
                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
                <h1>Quiz sobre la biografia de Roberto Clemente</h1>

                <p>Marque una respuesta por pregunta</p>

                <IonCard>
                    <IonCardHeader>
                        <IonCardTitle>¿En que año nació Roberto Clemente?</IonCardTitle>
                        <IonCardSubtitle></IonCardSubtitle>
                    </IonCardHeader>
                    <IonCardContent>
                        <IonList>
                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>1934</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>1950</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>1943</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>2022</IonLabel>
                            </IonItem>
                        </IonList>
                    </IonCardContent>
                </IonCard>

                <IonCard>
                    <IonCardHeader>
                        <IonCardTitle>¿En que pueblo se crió?</IonCardTitle>

                    </IonCardHeader>
                    <IonCardContent>
                        <IonList>
                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Caguas</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Cabo Rojo</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Luquillo</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Carolina</IonLabel>
                            </IonItem>
                        </IonList>
                    </IonCardContent>
                </IonCard>

                <IonCard>
                    <IonCardHeader>
                        <IonCardTitle>¿Para qué equipo de la liga de beisbol profesional de Puerto Rico jugó?</IonCardTitle>

                    </IonCardHeader>
                    <IonCardContent>
                        <IonList>
                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Bacalaos de Fajardo</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Alcapurrias de Loiza</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Cangrejeros de Santurce</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Brujos de Guayama</IonLabel>
                            </IonItem>
                        </IonList>
                    </IonCardContent>
                </IonCard>

                <IonCard>
                    <IonCardHeader>
                        <IonCardTitle>¿Para que equipo de la MLB jugó?</IonCardTitle>

                    </IonCardHeader>
                    <IonCardContent>
                        <IonList>
                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>New York Yankees</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Houston Astros</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Chicago Cubs</IonLabel>
                            </IonItem>

                            <IonItem>
                                <IonCheckbox slot="start"></IonCheckbox>
                                <IonLabel>Pittsburgh Pirates</IonLabel>
                            </IonItem>
                        </IonList>
                    </IonCardContent>
                </IonCard>

                <IonButton>Verificar respuestas</IonButton>

            </IonContent>

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

export default Questions;