import React, { useContext } from "react";
import {
 IonLabel,
 IonPage,
 IonButton,
 IonList,
 IonItem,
} from "@ionic/react";
import { Context } from "../../context/contex";
import AppShell from "../../components/Header";

const Services: React.FC = () => {
  const context = useContext(Context);

 if (!context) {
  return <div>Loading...</div>;
 }
  const {
 
  settings,

 } = context;
 return (
  <IonPage>
    <AppShell showBack={true} showLogo={false} title={'Our Services'}>
    {/* Airtime & Data */}
    {Number(settings?.enable_topup) &&
    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/topup.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Airtime & Data</h2>
       <p>
        Buy mobile airtime and data bundles instantly for all networks at the
        best rates.
       </p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/top-up" slot="end">
       TOP UP
      </IonButton>
     </IonItem>
    </IonList>
}
    {/* Pay Bills */}
    {Number(settings?.enable_bills) &&
    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/pay.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Pay Bills</h2>
       <p>
        Pay your electricity, cable TV, internet, WAEC, JAMB, and other utility
        bills quickly and securely.
       </p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/pay" slot="end">
       PAY NOW
      </IonButton>
     </IonItem>
    </IonList>
}
    {Number(settings?.enable_giftcard) &&
    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/cardicon.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Gift Card</h2>
       <p>
        Convert your gift cards to cash instantly at competitive rates. Fast processing, transparent pricing, and secure payouts — no stress, no delays.
       </p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/gift-card" slot="end">
       GET STARTED
      </IonButton>
     </IonItem>
    </IonList>
}
    {/* Buy & Sell Crypto */}
    {Number(settings?.enable_crypto) &&
    <IonList
     className="ion-margin-bottom"
     style={{ border: "1px solid darkorange" }}
    >
     <IonItem>
      <img
       src="assets/images/btc.png"
       style={{ width: "50px", height: "50px", marginRight: "10px" }}
      />
      <IonLabel>
       <h2>Buy & Sell Crypto</h2>
       <p>
        Trade Bitcoin, Ethereum, USDT, and more directly with Naira, fast and
        secure.
       </p>
      </IonLabel>
     </IonItem>
     <IonItem lines="none" style={{ padding: "0" }} slot="end">
      <IonButton routerLink="/crypto" slot="end">
       START TRADING
      </IonButton>
     </IonItem>
    </IonList>
}

    
   </AppShell>
  </IonPage>
 );
};

export default Services;