"use client";

import styles from "./proof-preview-modal.module.scss";
import { MdClose } from "react-icons/md";

interface ProofPreviewModalProps {
  proof: string;
  onClose: () => void;
}

const ProofPreviewModal = ({
  proof,
  onClose,
}: ProofPreviewModalProps) => {
  const fileUrl = `/storage/${proof}`;

  const isPdf = proof.toLowerCase().endsWith(".pdf");

  return (
    <div
      className={styles.overlay}
      onClick={onClose}
    >
      <div
        className={styles.modal}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          className={styles.closeBtn}
          onClick={onClose}
        >
          <MdClose size={22} />
        </button>

        {isPdf ? (
          <iframe
            src={fileUrl}
            className={styles.pdf}
            title="Proof Document"
          />
        ) : (
          <img
            src={fileUrl}
            alt="Payment Proof"
            className={styles.image}
          />
        )}
      </div>
    </div>
  );
};

export default ProofPreviewModal;