import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SettingsCard from "@/components/settings/SettingsCard";
import SwitchSetting from "@/components/settings/SwitchSetting";
import { __ } from "@wordpress/i18n";
import MobileStyle from "../components/MobileStyle";
import { MOBILE_LAYOUTS, PHONE_COLUMNS, TABLET_COLUMNS } from "../constants";

/**
 * General › Phones and tablets, with the Pro mobile-only styling.
 */
const MobileSection = () => (
  <SettingsCard
    title={__("Phones and tablets", "product-comparison-for-woocommerce")}
    description={__(
      "Swipe cards with labels that stay visible.",
      "product-comparison-for-woocommerce",
    )}
  >
    <ChoiceSetting
      path="mobile.layout"
      title={__("Layout on phones", "product-comparison-for-woocommerce")}
      description={__(
        "Cards keep row labels on screen; a wide table scrolls sideways.",
        "product-comparison-for-woocommerce",
      )}
      options={MOBILE_LAYOUTS}
    />
    <ChoiceSetting
      path="mobile.columns_phone"
      title={__(
        "Products side by side on phones",
        "product-comparison-for-woocommerce",
      )}
      options={PHONE_COLUMNS}
    />
    <ChoiceSetting
      path="mobile.columns_tablet"
      title={__("On tablets", "product-comparison-for-woocommerce")}
      options={TABLET_COLUMNS}
    />
    <SwitchSetting
      path="mobile.pin_first"
      title={__("Pin a base product", "product-comparison-for-woocommerce")}
      description={__(
        "Shoppers pin one product and swipe the others against it.",
        "product-comparison-for-woocommerce",
      )}
    />
    <MobileStyle />
  </SettingsCard>
);

export default MobileSection;