import { ProBadge } from "@/components/plan-badges";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { __ } from "@wordpress/i18n";

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

/** Rules › one card of Pro switches. */
const RuleCard = ({ title, description, children }) => (
  <SettingsCard title={title} badge={<ProBadge />} description={description}>
    {children}
  </SettingsCard>
);

/**
 * Rules (Pro): who can compare, what can be compared, and saved lists.
 * Each switch is enforced on the server (Pro add-on, App/Rules, App/Table,
 * App/Account).
 */
const RuleCards = () => (
  <>
    <RuleCard
      title={__("Who can compare", D)}
      description={__("Limit comparison to the right shoppers.", D)}
    >
      <SwitchSetting
        path="general.login_required"
        pro
        title={__("Only logged-in shoppers", D)}
        description={__(
          "Guests still see the Compare button; it asks them to log in first.",
          D,
        )}
      />
    </RuleCard>
    <RuleCard
      title={__("What can be compared", D)}
      description={__("Keep comparisons meaningful.", D)}
    >
      <SwitchSetting
        path="general.same_category_only"
        pro
        title={__("Same category only", D)}
        description={__(
          "A product joins only when it shares a category with the ones already listed; shoppers see a message otherwise.",
          D,
        )}
      />
      <SwitchSetting
        path="general.category_tabs"
        pro
        title={__("Category tabs in the table", D)}
        description={__(
          "Mixed lists get an “All” tab plus one per category. Each tab compares only its own products.",
          D,
        )}
      />
    </RuleCard>
    <RuleCard
      title={__("Saved lists", D)}
      description={__(
        "For logged-in shoppers, in My Account › Comparisons.",
        D,
      )}
    >
      <SwitchSetting
        path="general.multiple_lists"
        pro
        title={__("Multiple saved lists", D)}
        description={__(
          "Shoppers keep several comparisons, rename and reopen them on any device.",
          D,
        )}
      />
      <SwitchSetting
        path="general.history"
        pro
        title={__("Comparison history", D)}
        description={__(
          "The last 10 comparisons a shopper looked at, with “Compare again”.",
          D,
        )}
      />
    </RuleCard>
  </>
);

export default RuleCards;