(() => {
    "use strict";
  
    const React = window.React;
    const { getSetting, registerPaymentMethod } = window.wc.wcBlocksRegistry;
    const { __ } = window.wp.i18n;
    const { decodeEntities } = window.wp.htmlEntities;
  
    // Utility to decode title or fallback to default
    const getTitle = ({ title }) => decodeEntities(title) || __("Startbutton");
  
    // Utility to decode description
    const getDescription = ({ description }) => decodeEntities(description || "");
  
    // Display logos in a responsive layout
    const LogoDisplay = ({ logoUrls, label }) => (
      <div style={{ display: "flex", flexDirection: "row", gap: "0.5rem", flexWrap: "wrap" }}>
        {logoUrls.map((url, index) => (
          <img key={index} src={url} alt={label} />
        ))}
      </div>
    );
  
    // Main label component with title and logos
    const Label = ({ logoUrls, title }) => (
      <div style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}>
        <div>{getTitle({ title })}</div>
        <LogoDisplay logoUrls={logoUrls} label={getTitle({ title })} />
      </div>
    );
  
    // Fetch payment settings
    const settings = getSetting("startbutton_data", {});
  
    // Payment method definition
    const startbuttonMethod = {
      name: "startbutton",
      label: <Label logoUrls={settings.logo_urls} title={settings.title} />,
      content: <div>{getDescription({ description: settings.description })}</div>,
      edit: <div>{getDescription({ description: settings.description })}</div>,
      canMakePayment: () => true,
      ariaLabel: getTitle({ title: settings.title }),
      supports: {
        showSavedCards: settings.allow_saved_cards,
        showSaveOption: settings.allow_saved_cards,
        features: settings.supports,
      },
    };
  
    // Register the payment method
    registerPaymentMethod(startbuttonMethod);
  })();
  