import React, { useState } from "react";
import {
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonCol,
  IonContent,
  IonGrid,
  IonHeader,
  IonIcon,
  IonPage,
  IonRow,
  IonText,
  IonToolbar,
  IonButtons,
  IonBackButton,
  IonTitle,
  IonRouterLink,
  IonButton,
  IonSelect,
  IonSelectOption,
  IonInput,
  IonList,
  IonItem,
} from "@ionic/react";
import { arrowBackOutline, arrowForward } from "ionicons/icons";

const More: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar className="ion-padding-horizontal">
          <IonButtons slot="start">
            <IonBackButton
              text=""
              icon={arrowBackOutline}
              defaultHref="/"
            ></IonBackButton>
          </IonButtons>
          <IonTitle>More Services</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen className="ion-padding ion-content-bg">
        <IonList
          className="ion-margin-bottom"
          style={{ border: "1px solid darkorange" }}
        >
          <IonItem>
            <img
              src="assets/images/airtime2cash.png"
              style={{ width: "50px", height: "50px", marginRight: "10px" }}
            />
            <IonLabel>
              <h2>Airtime to Cash</h2>
              <p>Convert your excess airtime to cash in an instant.</p>
            </IonLabel>
          </IonItem>
          <IonItem lines="none" style={{ padding: "0" }} slot="end">
            <IonButton routerLink="/airtime2cash" slot="end">
              CONVERT NOW
            </IonButton>
          </IonItem>
        </IonList>

        <IonList
          className="ion-margin-bottom"
          style={{ border: "1px solid darkorange" }}
        >
          <IonItem>
            <img
              src="assets/images/card.png"
              style={{ width: "50px", height: "50px", marginRight: "10px" }}
            />
            <IonLabel>
              <h2>Virtual Card</h2>
              <p>Create or manage your virtual cards for online purchases.</p>
            </IonLabel>
          </IonItem>
          <IonItem lines="none" style={{ padding: "0" }} slot="end">
            <IonButton routerLink="/cards" slot="end">
              GET STARTED
            </IonButton>
          </IonItem>
        </IonList>

        <IonList
          className="ion-margin-bottom"
          style={{ border: "1px solid darkorange" }}
        >
          <IonItem>
            <img
              src="assets/images/bankacct.png"
              style={{ width: "50px", height: "50px", marginRight: "10px" }}
            />
            <IonLabel>
              <h2>Bank Accounts</h2>
              <p>Create or manage existing bank accounts.</p>
            </IonLabel>
          </IonItem>
          <IonItem lines="none" style={{ padding: "0" }} slot="end">
            <IonButton routerLink="/bank-account" slot="end">
              GET STARTED
            </IonButton>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default More;