cozsweet-frontend-nextjs/src/app/private-zoom/components/unlock-confirm-dialog.tsx

import type { PrivateAlbum } from "@/data/schemas/private-zoom";

import styles from "../private-zoom-screen.module.css";

export interface UnlockConfirmDialogProps {
  album: PrivateAlbum;
  isUnlocking: boolean;
  errorMessage: string | null;
  onCancel: () => void;
  onConfirm: () => void;
}

export function UnlockConfirmDialog({
  album,
  isUnlocking,
  errorMessage,
  onCancel,
  onConfirm,
}: UnlockConfirmDialogProps) {
  return (
    <div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
      <div className={styles.dialog}>
        <h2 className={styles.dialogTitle}>Unlock private album?</h2>
        <p className={styles.dialogCopy}>
          Unlock {album.imageCount} photos for {album.unlockCost} credits.
        </p>
        {errorMessage ? (
          <p className={styles.dialogError}>{errorMessage}</p>
        ) : null}
        <div className={styles.dialogActions}>
          <button
            type="button"
            className={styles.dialogSecondary}
            disabled={isUnlocking}
            onClick={onCancel}
          >
            Cancel
          </button>
          <button
            type="button"
            data-analytics-key="private_album.unlock_confirm"
            data-analytics-label="Confirm private album unlock"
            className={styles.dialogPrimary}
            disabled={isUnlocking}
            onClick={onConfirm}
          >
            {isUnlocking ? "Unlocking..." : "Unlock"}
          </button>
        </div>
      </div>
    </div>
  );
}