import SettingsCard from "@/components/settings/SettingsCard";
import StepperSetting from "@/components/settings/StepperSetting";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { useSetting } from "@/hooks/useSettings";
import { __ } from "@wordpress/i18n";

/** Table fields › Suggestions: the "You may also compare" strip. */
const SuggestionsSection = () => {
  const [enabled] = useSetting("table.related", true);

  return (
    <SettingsCard
      title={__("Suggestions", "product-comparison-for-woocommerce")}
    >
      <SwitchSetting
        path="table.related"
        title={__(
          "Show “You may also compare”",
          "product-comparison-for-woocommerce",
        )}
        description={__(
          "Related products (same categories or tags) under the popup and compare page, each with an Add to compare button. Hidden on shared links and when the list is full.",
          "product-comparison-for-woocommerce",
        )}
      />
      {enabled && (
        <StepperSetting
          path="table.related_limit"
          title={__(
            "Number of suggestions",
            "product-comparison-for-woocommerce",
          )}
          min={2}
          max={8}
        />
      )}
    </SettingsCard>
  );
};

export default SuggestionsSection;