import { jsx as e, jsxs as o } from "react/jsx-runtime";
import { l } from "./index.C1ZfizMq.js";
import { P as s } from "./PageSection.DaF45FbK.js";
import { a as m, g as n, d as c } from "./GridRow._ehOXG8R.js";
import "./GridLayouts.DSIvKCIo.js";
import { C as d } from "./card.CVCKhKP6.js";
const C = "creator_templates_dDtGX", g = "creator_templateCol_oRL4L", p = "creator_templateItem_ayxCr", _ = "creator_titleContainer_nK3AM", h = "creator_imageContainer_HXtW-", N = "creator_image_1X6gU", t = { templates: C, templateCol: g, templateItem: p, titleContainer: _, imageContainer: h, image: N }, y = ({ templates: i, onTemplateSelect: r }) => /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e("div", { className: t.templates, children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
  l,
  {
    values: i,
    layout: (a) => /* @__PURE__ */ e(c, { className: t.templateCol, children: /* @__PURE__ */ o(
      d,
      {
        elevation: "high",
        className: t.templateItem,
        onClick: () => {
          r(a.id);
        },
        children: [
          /* @__PURE__ */ e("div", { className: t.titleContainer, children: a.title }),
          /* @__PURE__ */ e("div", { className: t.imageContainer, children: /* @__PURE__ */ e(
            "img",
            {
              className: t.image,
              src: a.imageURL,
              alt: a.title,
              role: "img",
              "aria-label": a.title
            }
          ) })
        ]
      }
    ) })
  }
) }) }) }) });
export {
  y as T
};
