"use client";

import styles from "./subscription-payment-success-dialog.module.css";

export interface SubscriptionPaymentSuccessDialogProps {
  open: boolean;
  subscriptionType: "vip" | "topup";
  onClose: () => void;
}

export function SubscriptionPaymentSuccessDialog({
  open,
  subscriptionType,
  onClose,
}: SubscriptionPaymentSuccessDialogProps) {
  if (!open) return null;

  const content =
    subscriptionType === "topup"
      ? "Your coins have been added to your wallet successfully."
      : "Your VIP membership has been activated successfully.";

  return (
    <div
      className={styles.overlay}
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="subscription-payment-success-title"
    >
      <div className={styles.dialog}>
        <div className={styles.badge} aria-hidden="true">
          ✓
        </div>
        <h2 id="subscription-payment-success-title" className={styles.title}>
          Payment successful
        </h2>
        <p className={styles.content}>{content}</p>
        <button type="button" className={styles.button} onClick={onClose}>
          OK
        </button>
      </div>
    </div>
  );
}
