import n, { useState as l } from "react";
import { Dropdown as i, DropdownAlignment as s } from "../../node_modules/@frontify/fondue/dist/components/Dropdown/Dropdown.es.es.js";
import { MenuItemContentSize as c } from "../../node_modules/@frontify/fondue/dist/components/MenuItem/types.es.es.js";
import "./BrandDropdown.es2.js";
const v = ({ brands: o, onSelection: r, initialActiveId: a }) => {
  const [t, m] = l();
  return /* @__PURE__ */ n.createElement(i, {
    alignment: s.Start,
    menuBlocks: [
      {
        ariaLabel: "First section",
        id: "block1",
        menuItems: o.map((e) => ({
          decorator: /* @__PURE__ */ n.createElement("div", {
            className: "brand-dropdown__avatar",
            style: {
              backgroundColor: d(e.rgbaColor),
              backgroundImage: `url(${e.avatar})`
            }
          }),
          id: e.id,
          size: c.Small,
          title: e.name
        }))
      }
    ],
    activeItemId: t != null ? t : a,
    onChange: (e) => {
      e && (m(e), r(e));
    },
    placeholder: "select a brand"
  });
}, d = ({ red: o, green: r, blue: a, alpha: t }) => `rgba(${o}, ${r}, ${a}, ${t})`;
export {
  v as BrandDropdown
};
//# sourceMappingURL=BrandDropdown.es.js.map
