"use client";

import styles from "./voice-unlock-options-dialog.module.css";

export interface VoiceUnlockOptionsDialogProps {
  open: boolean;
  onClose: () => void;
  onBuyVoicePackage: () => void;
  onActivateVip: () => void;
}

export function VoiceUnlockOptionsDialog({
  open,
  onClose,
  onBuyVoicePackage,
  onActivateVip,
}: VoiceUnlockOptionsDialogProps) {
  if (!open) return null;

  return (
    <div
      className={styles.overlay}
      role="dialog"
      aria-modal="true"
      aria-labelledby="voice-unlock-options-title"
    >
      <div className={styles.dialog}>
        <h2 id="voice-unlock-options-title" className={styles.title}>
          Unlock voice message
        </h2>
        <p className={styles.content}>
          Choose how you would like to unlock this voice message.
        </p>

        <div className={styles.options}>
          <button
            type="button"
            className={`${styles.optionButton} ${styles.primary}`}
            onClick={onBuyVoicePackage}
          >
            购买语音包
          </button>
          <button
            type="button"
            className={`${styles.optionButton} ${styles.secondaryOption}`}
            onClick={onActivateVip}
          >
            <span className={styles.optionTitle}>开通 VIP</span>
            <span className={styles.optionDescription}>
              免费10条语言消息+无限畅聊
            </span>
          </button>
        </div>

        <button type="button" className={styles.cancel} onClick={onClose}>
          Cancel
        </button>
      </div>
    </div>
  );
}
