/**
 * PlusFeatureOverlay - Overlay for features requiring ZenBlocks Plus.
 *
 * Similar to ProFeatureOverlay but gated by isPlus() instead of isPro().
 * Shows a "PLUS" badge with white background when zenblocks-plus is not active.
 */

import { __ } from "@wordpress/i18n";
import { isPlus } from "../../../utils/is-pro";
import { getLocalizedUrl } from "../../../utils/localized-url";
import "./plus-feature-overlay.css";

const PlusFeatureOverlay = ({ children, featureName = "", learnMorePath = "" }) => {
  const isPlusUser = isPlus();
  const learnMoreUrl = getLocalizedUrl(learnMorePath);

  if (isPlusUser) {
    return children;
  }

  return (
    <div className="zenblocks-plus-feature-wrapper">
      <div className="zenblocks-plus-feature-content">{children}</div>
      <div className="zenblocks-plus-feature-overlay">
        <div className="zenblocks-plus-feature-badge">
          <span className="zenblocks-plus-feature-badge-text">PLUS</span>
        </div>
        <p className="zenblocks-plus-feature-message">
          {__("Free Addon", "zenblocks")}
        </p>
        <a href={learnMoreUrl} className="zenblocks-plus-feature-link" target="_blank" rel="noopener noreferrer">
          ZenBlocks Plus
          <svg className="zenblocks-plus-feature-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
            <polyline points="15 3 21 3 21 9"></polyline>
            <line x1="10" y1="14" x2="21" y2="3"></line>
          </svg>
        </a>
      </div>
    </div>
  );
};

export default PlusFeatureOverlay;
