import { useEffect, useState, useContext } from "react";

import {
  IonModal,
  IonContent,
  IonButton,
  IonIcon,
} from "@ionic/react";
import { closeOutline } from "ionicons/icons";
import { Context } from "../context/contex";

interface PromoModalProps {
  promo: any;
  isOpen: boolean;
  onClose: () => void;
}

const PromoModal: React.FC<PromoModalProps> = ({ promo, isOpen, onClose }) => {
    const context = useContext(Context);
  if (!context) return null;
    const { settings } = context;

  if (!promo) return null;

  return (
   <IonModal isOpen={isOpen} onDidDismiss={onClose}>
  <IonContent className="promo-modal">

    {/* Close */}
    <IonButton
      fill="clear"
      className="promo-close-btn"
      onClick={onClose}
    >
      <IonIcon icon={closeOutline} />
    </IonButton>

    {/* CENTER WRAPPER */}
    <div className="promo-center">

      {/* IMAGE PROMO */}
      {promo.type === "image" && (
        <img
          src={settings?.domain + promo.image}
          className="promo-image"
          onClick={() => {
            if (promo.cta_link) window.location.href = promo.cta_link;
          }}
        />
      )}

      {/* HTML PROMO */}
      {promo.type === "html" && (
        <div
          className="promo-html"
          dangerouslySetInnerHTML={{ __html: promo.html }}
        />
      )}

    </div>

  </IonContent>
</IonModal>

  );
};

export default PromoModal;