import ChoiceSetting from "@/components/settings/ChoiceSetting";
import SettingsCard from "@/components/settings/SettingsCard";
import { __ } from "@wordpress/i18n";
import { ANIMATIONS, POPUP_LAYOUTS } from "../constants";

/** Design › Popup: layout (dialog or full-screen overlay) and animation. */
const PopupSection = () => (
  <SettingsCard
    title={__("Popup", "product-comparison-for-woocommerce")}
    description={__(
      "How the comparison opens on top of the page.",
      "product-comparison-for-woocommerce",
    )}
  >
    <ChoiceSetting
      source="design"
      path="popup_layout"
      options={POPUP_LAYOUTS}
      title={__("Layout", "product-comparison-for-woocommerce")}
      description={__(
        "A centred dialog, or a full-screen overlay that scrolls like a page.",
        "product-comparison-for-woocommerce",
      )}
    />
    <ChoiceSetting
      source="design"
      path="popup_animation"
      pro
      options={ANIMATIONS}
      title={__("Animation", "product-comparison-for-woocommerce")}
      description={__(
        "How the comparison popup opens",
        "product-comparison-for-woocommerce",
      )}
    />
  </SettingsCard>
);

export default PopupSection;