import React from "react";
import { useNavigate } from "react-router-dom";
import Button from "@app/components/button/Button";
import { LockIcon, RightArrow } from "@app/assets/images/icons";
import "./feature-locked-content-styles.scss";

/**
 * Shared content for every premium-gated UpgradePopover (media limit, scope
 * selection, footer toggle) — see WP-4533. Consolidates what used to be
 * separate near-duplicate blocks per usage site.
 */
const FeatureLockedContent: React.FC = () => {
  const navigate = useNavigate();
  const localization = sfsyncI18n.data;

  return (
    <div className="sfsync-featureLocked">
      <div className="sfsync-featureLocked-header">
        {LockIcon}
        <span className="sfsync-featureLocked-title">
          {localization.feature_locked}
        </span>
      </div>
      <p className="sfsync-featureLocked-description">
        {localization.feature_locked_desc}
      </p>
      <Button
        id="sfsync-featureLocked-upgradeButton"
        text={localization.upgrade_plan}
        icon={RightArrow}
        iconPosition="end"
        onClickHandler={() => {
          navigate("/upgrade-plan", { replace: true });
        }}
      />
    </div>
  );
};

export default FeatureLockedContent;