import type { PrivateZoneVideoPost } from "@/data/schemas/private-zone";

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

export interface VideoPostUnlockDialogProps {
  post: PrivateZoneVideoPost;
  isUnlocking: boolean;
  errorMessage: string | null;
  onCancel: () => void;
  onConfirm: () => void;
}

export function VideoPostUnlockDialog({
  post,
  isUnlocking,
  errorMessage,
  onCancel,
  onConfirm,
}: VideoPostUnlockDialogProps) {
  return (
    <div className={styles.dialogOverlay} role="alertdialog" aria-modal="true">
      <div className={styles.dialog}>
        <h2 className={styles.dialogTitle}>Unlock this private video?</h2>
        <p className={styles.dialogCopy}>
          You&apos;ll use {post.unlockCostCredits} credits. The video stays in your
          Private Zone after unlocking.
        </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_zone_video.unlock_confirm"
            data-analytics-label="Confirm Private Zone video unlock"
            className={styles.dialogPrimary}
            disabled={isUnlocking}
            onClick={onConfirm}
          >
            {isUnlocking ? "Unlocking..." : "Unlock"}
          </button>
        </div>
      </div>
    </div>
  );
}
