import IMAGES from "@/constants/images";
import React from "react";
import styles from "./confirmation.module.css";
import Loader from "../Loader/loader";
import Image from "next/image";

const ConfirmationPopup = ({
  title,
  heading,
  acceptedFunction,
  rejectedFunction,
  isLoaderShow,
  extraActions,
  acceptLabel,
  rejectLabel,
  /** Roomier card + smaller icon (e.g. suspension flows) */
  layout = "default",
}: {
  title?: string;
  heading?: string;
  acceptedFunction?: () => void;
  rejectedFunction?: () => void;
  isLoaderShow?: boolean;
  extraActions?: React.ReactNode;
  acceptLabel?: string;
  /** Defaults to "No" */
  rejectLabel?: string;
  layout?: "default" | "comfortable";
}) => {
  const hasExtras = Boolean(extraActions);
  const useComfortable = layout === "comfortable" || hasExtras;

  return (
    <div className={styles.confirmationContainer}>
      <div
        className={`${styles.centerContent} ${
          useComfortable ? styles.centerContentFlexible : ""
        }`}
      >
        <Image src={IMAGES.questionIcon} alt="logo" width={100} height={100} />

        <div className={styles.content}>
          <h1>{heading ?? "Alert"}</h1>
          <p className={useComfortable ? styles.bodyTextRelaxed : undefined}>
            {title ?? "Are your sure you want to delete this use?"}
          </p>
          {extraActions ? (
            <div className={styles.extraActions}>{extraActions}</div>
          ) : null}
        </div>

        <div className={styles.btns}>
          <button className={styles.focusBtn} onClick={acceptedFunction}>
            {isLoaderShow ? (
              <Loader
                style={
                  {
                    "--loaderWidth": "38px",
                    "--loaderHeight": "38px",
                  } as React.CSSProperties
                }
              />
            ) : (
              acceptLabel ?? "Yes"
            )}
          </button>
          <button className={styles.normalBtn} onClick={rejectedFunction}>
            {rejectLabel ?? "No"}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmationPopup;