website/components/Application/ConfirmPopup/ConfirmPopup.tsx

import Image from "next/image"
import { useState } from "react"
import useTranslation from "next-translate/useTranslation"
import classNames from "clsx"

import { Loader } from "../../design/Loader"

export interface ConfirmPopupProps {
  className?: string
  title: string
  handleYes: () => void | Promise<void>
  handleNo: () => void | Promise<void>
}

export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
  const { t } = useTranslation()
  const [isLoading, setIsLoading] = useState(false)

  const handleYesLoading = async (): Promise<void> => {
    setIsLoading((isLoading) => {
      return !isLoading
    })
    await props.handleYes()
  }

  return (
    <div className={props.className}>
      <Loader
        className={classNames(
          "absolute left-1/2 top-1/2 scale-0 transition-all",
          {
            "scale-100": isLoading,
          },
        )}
      />
      <div
        className={classNames(
          "visible flex flex-col items-center opacity-100 transition-all",
          {
            "invisible opacity-0": isLoading,
          },
        )}
      >
        <Image
          quality={100}
          src="/images/svg/design/join-guild.svg"
          alt="Illustration"
          height={150}
          width={150}
        />
        <div className="mt-8 flex flex-col">
          <h1 className="mb-6 text-center text-xl">{props.title}</h1>
          <div className="flex gap-7">
            <button
              className="rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
              onClick={handleYesLoading}
              data-cy="confirm-popup-yes-button"
            >
              {t("common:yes")}
            </button>
            <button
              className="rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75"
              onClick={props.handleNo}
              data-cy="confirm-popup-no-button"
            >
              {t("common:no")}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}