import { __ } from "@wordpress/i18n";
import { Button } from "@wordpress/components";
import "./pro-feature-notice.css";

const ProFeatureNotice = ({ proFeatures, isFreePreview, onToggleFreePreview }) => {
  const featureTags = [];

  if (proFeatures.hasTextAnimation) featureTags.push(__("Text Animation", "zenblocks"));
  if (proFeatures.hasIconAnimation) featureTags.push(__("Icon Animation", "zenblocks"));
  if (proFeatures.hasFrameAnimation) featureTags.push(__("Frame Animation", "zenblocks"));
  if (proFeatures.hasButtonAnimation) featureTags.push(__("Button Animation", "zenblocks"));
  if (proFeatures.hasThumbnail) featureTags.push(__("Thumbnail", "zenblocks"));
  if (proFeatures.hasBand) featureTags.push(__("Band", "zenblocks"));
  if (proFeatures.hasBgVideo) featureTags.push(__("Background Video", "zenblocks"));
  if (proFeatures.hasIconFrame) featureTags.push(__("Icon Frame", "zenblocks"));
  if (proFeatures.hasMicroText) featureTags.push(__("Micro Text", "zenblocks"));
  if (proFeatures.hasSubText) featureTags.push(__("Sub Text", "zenblocks"));

  return (
    <div className="zenblocks-pro-feature-notice">
      <div className="zenblocks-pro-feature-notice-header">
        <span className="zenblocks-pro-feature-notice-badge">PRO</span>
        <span className="zenblocks-pro-feature-notice-title">
          {__("Pro features in use", "zenblocks")}
        </span>
      </div>

      <div className="zenblocks-pro-feature-notice-tags">
        {featureTags.map((tag) => (
          <span key={tag} className="zenblocks-pro-feature-notice-tag">
            {tag}
          </span>
        ))}
      </div>

      <p className="zenblocks-pro-feature-notice-message">
        {__("Visible in editor only. Not rendered on frontend.", "zenblocks")}
      </p>

      <div className="zenblocks-pro-feature-notice-actions">
        <Button
          variant="secondary"
          isSmall
          isPressed={isFreePreview}
          onClick={onToggleFreePreview}
          className="zenblocks-pro-feature-notice-preview-btn"
        >
          {isFreePreview ? __("Exit Preview", "zenblocks") : __("Free Preview", "zenblocks")}
        </Button>
        <a
          href="/wp-admin/admin.php?page=zenblocks"
          className="zenblocks-pro-feature-notice-upgrade"
        >
          {__("Upgrade to Pro", "zenblocks")}
        </a>
      </div>
    </div>
  );
};

export default ProFeatureNotice;
