(function (wp) {
  const { registerBlockType } = wp.blocks;
  const { InspectorControls, useBlockProps } = wp.blockEditor;
  const { PanelBody, TextareaControl } = wp.components;

  registerBlockType("fjord/about-text-marquee", {
    edit: (props) => {
      const { attributes, setAttributes } = props;
      const blockProps = useBlockProps({ className: "fjord-about-brands" });

      return wp.element.createElement(
        wp.element.Fragment,
        null,
        wp.element.createElement(
          InspectorControls,
          null,
          wp.element.createElement(
            PanelBody,
            { title: "Items", initialOpen: true },
            wp.element.createElement(TextareaControl, {
              label: "Items (one per line)",
              value: attributes.items,
              onChange: (value) => setAttributes({ items: value }),
            })
          )
        ),
        wp.element.createElement(
          "div",
          blockProps,
          wp.element.createElement(
            "div",
            {
              style: {
                border: "1px dashed rgba(14,16,17,0.25)",
                borderRadius: "12px",
                padding: "24px",
                textAlign: "center",
                color: "rgba(14,16,17,0.6)",
                fontSize: "13px",
              },
            },
            "About text movement renders on the front-end."
          )
        )
      );
    },
    save: () => null,
  });
})(window.wp);
