import React, { useState } from "react";
import {
 IonLabel,

 IonPage,

 IonButton,
 IonList,
 IonItem,
} from "@ionic/react";
import AppShell from "../../components/Header";

const Pay: React.FC = () => {
 return (
  <IonPage>
      <AppShell showBack={true} showLogo={false} title={'Pay Bills'}>
    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/electricity.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Pay Electricity Bill</h2>
       <p>Pay for electricity on prepaid and postpaid meters.</p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/electricity" slot="end">
       PAY NOW
      </IonButton>
     </IonItem>
    </IonList>

    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/tv.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Pay Cable TV</h2>
       <p>Easily renew or change your TV subscription.</p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/cable-tv" slot="end">
       PAY NOW
      </IonButton>
     </IonItem>
    </IonList>

    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/education.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Pay Educational Bills</h2>
       <p>Pay for WAEC, JAMB and more.</p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/education" slot="end">
       PAY NOW
      </IonButton>
     </IonItem>
    </IonList>
   </AppShell>
  </IonPage>
 );
};

export default Pay;