"use client";

import { UpgradeProButton } from "./UpgradeProButton";

type Props = {
  open: boolean;
  onContinueWithWatermark: () => void;
  onClose: () => void;
};

/**
 * Shown when a free user who already used their 2 watermark-free videos
 * starts another render.
 */
export function WatermarkPaywallModal({ open, onContinueWithWatermark, onClose }: Props) {
  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="watermark-paywall-title"
      onClick={onClose}
    >
      <div
        className="w-full max-w-md rounded-lg border border-gray-700 bg-surface-light p-6 shadow-xl"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 id="watermark-paywall-title" className="text-lg font-semibold text-white">
          You&apos;ve used your 2 free watermark-free videos! 🎉
        </h2>
        <p className="mt-3 text-sm leading-relaxed text-gray-300">
          Subsequent videos in the Free tier will include a small Songs2VID watermark. Upgrade to Pro
          for unwatermarked videos, 4K export, and priority rendering.
        </p>
        <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onContinueWithWatermark}
            className="rounded border border-gray-600 px-4 py-2 text-sm text-gray-200 hover:border-gray-400 hover:text-white"
          >
            Continue with Watermark
          </button>
          <UpgradeProButton
            label="Upgrade to Pro"
            className="inline-flex items-center justify-center rounded bg-accent px-4 py-2 text-sm font-medium text-black hover:opacity-90"
          />
        </div>
      </div>
    </div>
  );
}