"use client";
import { jsxs as s, jsx as r } from "react/jsx-runtime";
import { classNames as m } from "../../../../../utils.js";
import { useSettings as c } from "../../hooks/use-settings.js";
import { SettingsType as p } from "../../types/index.js";
import { Tooltip as t } from "../shared/tooltip.js";
function v({
  designs: d,
  fieldName: l = "preset.desktop",
  className: n
}) {
  const [i, a] = c(l, p.BLOCK);
  return /* @__PURE__ */ s("div", { className: n, children: [
    /* @__PURE__ */ r("p", { className: "mb-1.5 text-xs", children: "Designs" }),
    /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-1.5", children: d.map((e, o) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ s(t.Trigger, { children: [
      /* @__PURE__ */ r(
        "div",
        {
          onClick: () => a(e.id),
          className: m(
            "hover:border-dark-300 cursor-pointer rounded border-[3px] border-transparent",
            {
              "border-dark-300": i === e.id || !i && o === 0
            }
          ),
          children: /* @__PURE__ */ r("img", { src: e.image, alt: "Not found" })
        }
      ),
      /* @__PURE__ */ r(t.Content, { children: e.title ?? `Design ${o + 1}` })
    ] }) }, o)) })
  ] });
}
export {
  v as PresetsControl
};
//# sourceMappingURL=presets-control.js.map
