import { ProBadge } from "@/components/plan-badges";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { useSetting } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import { __ } from "@wordpress/i18n";
import LeadsDownload from "../components/LeadsDownload";

const D = "product-comparison-for-woocommerce";

/**
 * Engage › Share and follow up (Pro): PDF, "Email me this comparison" and
 * the price-drop / back-in-stock alerts.
 */
const FollowUpSection = () => {
  const [email] = useSetting("engage.email_comparison", false);

  return (
    <SettingsCard
      title={__("Share and follow up", D)}
      badge={<ProBadge />}
      description={__("Keep the conversation going, with consent.", D)}
    >
      <SwitchSetting
        path="engage.pdf"
        pro
        title={__("Save as PDF", D)}
        description={__(
          "A clean print view with your store logo; shoppers save it as a PDF from the print dialog.",
          D,
        )}
      />
      <SwitchSetting
        path="engage.email_comparison"
        pro
        title={__("“Email me this comparison”", D)}
        description={__(
          "Sends the shopper a link to the comparison. An unticked “send me offers” box collects opt-in leads.",
          D,
        )}
      />
      {email && IS_PRO && (
        <div className="ino:pb-4">
          <LeadsDownload />
        </div>
      )}
      <SwitchSetting
        path="engage.price_alerts"
        pro
        title={__("Price-drop alerts", D)}
        description={__(
          "“Tell me when the price drops” under Add to cart. Double opt-in, one email, with an unsubscribe link.",
          D,
        )}
      />
      <SwitchSetting
        path="engage.stock_alerts"
        pro
        title={__("Back-in-stock alerts", D)}
        description={__(
          "“Email me when it’s back in stock” on out-of-stock products. Double opt-in, one email.",
          D,
        )}
      />
    </SettingsCard>
  );
};

export default FollowUpSection;