import { j as r } from "../../../../../_virtual/jsx-runtime.js";
import { tx as t, css as e } from "../../../../style-system/dist/twind.js";
import { useDraft as u } from "../../../../../use-page-data.js";
function x({
  theme: o,
  noPreview: l,
  className: s,
  selected: a,
  onClick: n
}) {
  return u(), /* @__PURE__ */ r.jsxs(
    "button",
    {
      type: "button",
      className: t(
        "group/theme-button overflow-hidden relative h-[44px] w-full rounded outline shadow-sm  flex flex-grow p-1 gap-1 items-stretch justify-stretch group transition-all",
        e({
          backgroundColor: o.colors.base100
          // color: theme.colors.baseContent
        }),
        a ? "outline-upstart-500" : "outline-gray-200",
        l ? "cursor-default" : "cursor-pointer hover:(outline-upstart-400)",
        s
      ),
      onClick: l ? void 0 : n,
      children: [
        /* @__PURE__ */ r.jsx(
          "div",
          {
            className: t(
              "flex-1 rounded-l",
              e({
                backgroundColor: o.colors.primary
              })
            )
          }
        ),
        /* @__PURE__ */ r.jsx(
          "div",
          {
            className: t(
              "flex-1",
              e({
                backgroundColor: o.colors.secondary
              })
            )
          }
        ),
        /* @__PURE__ */ r.jsx(
          "div",
          {
            className: t(
              "flex-1",
              e({
                backgroundColor: o.colors.accent
              })
            )
          }
        ),
        /* @__PURE__ */ r.jsx(
          "div",
          {
            className: t(
              "flex-1 rounded-r",
              e({
                backgroundColor: o.colors.neutral
              })
            )
          }
        ),
        /* @__PURE__ */ r.jsx(
          "h3",
          {
            className: t(
              `absolute  left-1/2 -translate-x-1/2 transition-all top-1/2 translate-y-full scale-75
          -bottom-6 h-6
          group-hover/theme-button:(-translate-y-1/2 scale-100)
          py-px text-xs max-w-[86%] inline-flex items-center
          overflow-hidden text-ellipsis text-nowrap z-20 bg-black/30 px-2 font-normal text-white backdrop-blur-md rounded-full`
            ),
            children: o.name
          }
        )
      ]
    }
  );
}
export {
  x as default
};
//# sourceMappingURL=ThemePreview.js.map
