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

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

/** SEO pages › settings (Pro): on/off, URL base, schema and sitemap. */
const SeoSettingsSection = () => {
  const [enabled] = useSetting("seo.enabled", false);
  const [base] = useSetting("seo.base", "compare");

  return (
    <SettingsCard
      title={__("“A vs B” pages", D)}
      badge={<ProBadge />}
      description={__(
        "Indexable comparison pages with Product and ItemList schema.",
        D,
      )}
    >
      <SwitchSetting
        path="seo.enabled"
        pro
        title={__("Comparison pages", D)}
        description={__(
          "Adds Products › Comparison pages: pick 2–4 products, write an intro, and the page shows their comparison table, built for search engines.",
          D,
        )}
      />
      {enabled && IS_PRO && (
        <>
          <div className="ino:py-4">
            <TextSetting
              path="seo.base"
              label={__("URL base", D)}
              placeholder="compare"
              mono
            />
            <p className="ino:mt-1.5 ino:mb-0 ino:text-xs ino:text-muted-foreground">
              {sprintf(
                /* translators: %s: URL base, e.g. "compare". */
                __("Pages live at /%s/aria-one-vs-aria-pro/.", D),
                base || "compare",
              )}
            </p>
          </div>
          <SwitchSetting
            path="seo.schema"
            title={__("Product and ItemList schema", D)}
            description={__(
              "JSON-LD with each product's price, availability and rating, for rich results.",
              D,
            )}
          />
          <SwitchSetting
            path="seo.sitemap"
            title={__("Add to sitemap", D)}
            description={__(
              "Works with WordPress core sitemaps, Yoast SEO and Rank Math.",
              D,
            )}
          />
        </>
      )}
    </SettingsCard>
  );
};

export default SeoSettingsSection;