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 { __ } from "@wordpress/i18n";

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

/** Engage › In the comparison table (Pro): turn a comparison into an order. */
const TableActionsSection = () => {
  const [quote] = useSetting("engage.quote", false);

  return (
    <SettingsCard
      title={__("In the comparison table", D)}
      badge={<ProBadge />}
      description={__("Turn a comparison into an order.", D)}
    >
      <SwitchSetting
        path="table.bulk_add_to_cart"
        pro
        title={__("Add selected to cart", D)}
        description={__(
          "Products get a checkbox; shoppers add the ticked ones in one click. Products with options to choose (variable, grouped, external) keep their own button.",
          D,
        )}
      />
      <SwitchSetting
        path="engage.wishlist"
        pro
        title={__("Add all to wishlist", D)}
        description={__(
          "Works with YITH WooCommerce Wishlist or TI WooCommerce Wishlist; the button shows only while one of them is active.",
          D,
        )}
      />
      <SwitchSetting
        path="engage.quote"
        pro
        title={__("Request a quote", D)}
        description={__(
          "A short form (name, email, phone, message) that emails you the compared products. Replies go to the shopper.",
          D,
        )}
      />
      {quote && IS_PRO && (
        <div className="ino:pb-4">
          <TextSetting
            path="engage.quote_email"
            label={__("Send quote requests to", D)}
            placeholder={__("The site admin email", D)}
          />
        </div>
      )}
    </SettingsCard>
  );
};

export default TableActionsSection;