import { color } from "html2canvas/dist/types/css/types/color";
import React from "react";

interface PhotoComparisonModalProps {
  profilePicture: string;
  vninPicture: string;
  getLoading: boolean;
}

const PhotoComparisonModal: React.FC<PhotoComparisonModalProps> = ({
  profilePicture,
  vninPicture,
  getLoading,
}) => {
  return (
    <div
      className="modal fade modal-lg vnin-modal"
      id="photoComparisonModal"
      aria-hidden="true"
    >
      <div className="modal-dialog" role="document">
        <div className="modal-content">
          <div className="page-title position-relative">
            {/* <button
              type="button"
              className="btn-close position-absolute top-0 end-0"
              data-bs-dismiss="modal"
            ></button> */}
            <button
              type="button"
              className="closed-modal"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div className="modal-body text-center">
            {getLoading && <p>Loading...</p>}
            {!getLoading && (
              <div className="d-flex justify-content-center gap-5 vnin-comparison-modal-content">
                <div className="text-center">
                  <p className="fw-bold mb-3">Profile Picture</p>
                  <div
                    className="rounded-circle overflow-hidden border border-secondary"
                    style={{ width: "200px", height: "200px" }}
                  >
                    <img
                      src={profilePicture}
                      alt="Profile Picture"
                      className="w-100 h-100 object-fit-cover"
                    />
                  </div>
                </div>
                <div className="d-flex align-items-center">
                  <img
                    className="vnin-arrow"
                    src="/images/compare-icon.svg"
                    width={60}
                    height={60}
                    alt="vs"
                  />
                </div>
                <div className="text-center">
                  <p className="fw-bold mb-3">VNIN Profile Picture</p>
                  <div
                    className="rounded-circle overflow-hidden border border-secondary"
                    style={{ width: "200px", height: "200px" }}
                  >
                    <img
                      src={vninPicture}
                      alt="VNIN Picture"
                      className="w-100 h-100 object-fit-cover"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
          <div className="modal-footer">
            <button
              type="button"
              className="theme-btn btn-style-one"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PhotoComparisonModal;