/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./upgrade-plan.module.scss"

import { formatMoneyComplete } from "@/lib/utils/format-money"

interface Props {
  plan: any

  balance: number

  onClose: () => void

  onConfirm: () => void
}

const UpgradePlanModal = ({
  plan,
  balance,
  onClose,
  onConfirm,
}: Props) => {
  return (
    <div
      className={styles.overlay}
    >
      <div
        className={styles.modal}
      >
        <h3>
          Upgrade Account
        </h3>

        <p>
          You are about to upgrade
          your account to{" "}
          <strong>
            {plan.name}
          </strong>
          .
        </p>

        <div
          className={styles.summary}
        >
          <div>
            <span>
              Current Balance
            </span>

            <strong>
              ₦
              {formatMoneyComplete(
                balance
              )}
            </strong>
          </div>

          <div>
            <span>
              Upgrade Fee
            </span>

            <strong>
              ₦
              {formatMoneyComplete(
                plan.price_per_year
              )}
            </strong>
          </div>
        </div>

        <div
          className={styles.notice}
        >
          The upgrade fee will be
          deducted immediately from
          your account balance.
        </div>

        <div
          className={styles.actions}
        >
          <button
            onClick={onClose}
          >
            Cancel
          </button>

          <button
            onClick={onConfirm}
          >
            Confirm Upgrade
          </button>
        </div>
      </div>
    </div>
  )
}

export default UpgradePlanModal