import React from 'react';
import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { chevronBackOutline, globeOutline } from 'ionicons/icons';
import { useHistory } from 'react-router-dom';

const HelloWorld: React.FC = () => {
  const history = useHistory();

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonButton aria-label="Back" onClick={() => history.goBack()}>
              <IonIcon icon={chevronBackOutline} slot="icon-only" />
            </IonButton>
          </IonButtons>
          <IonTitle>Hello World</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent
        className="ion-padding"
        style={
          { '--background': 'var(--ion-color-light)' } as React.CSSProperties
        }
      >
        <div
          style={{
            minHeight: '70vh',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            textAlign: 'center',
            gap: 16,
          }}
        >
          <div
            style={{
              width: 72,
              height: 72,
              borderRadius: 24,
              background: 'rgba(var(--ion-color-primary-rgb), 0.12)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <IonIcon
              icon={globeOutline}
              style={{ fontSize: 36, color: 'var(--ion-color-primary)' }}
            />
          </div>
          <div>
            <h1
              style={{
                margin: '0 0 8px',
                fontSize: 28,
                fontWeight: 700,
                color: 'var(--ion-color-dark)',
              }}
            >
              Hello, world!
            </h1>
            <p
              style={{
                margin: 0,
                color: 'var(--ion-color-medium)',
                lineHeight: 1.5,
              }}
            >
              You made it to the new page.
            </p>
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default HelloWorld;