import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { useDraft } from "../../../../../use-page-data.js";
function ThemePreview({
  theme,
  noPreview,
  className,
  selected,
  onClick
}) {
  useDraft();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "button",
    {
      type: "button",
      className: D(
        "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: theme.colors.base100
          // color: theme.colors.baseContent
        }),
        selected ? "outline-upstart-500" : "outline-gray-200",
        noPreview ? "cursor-default" : "cursor-pointer hover:(outline-upstart-400)",
        className
      ),
      onClick: noPreview ? void 0 : onClick,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "flex-1 rounded-l",
              E({
                backgroundColor: theme.colors.primary
              })
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "flex-1",
              E({
                backgroundColor: theme.colors.secondary
              })
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "flex-1",
              E({
                backgroundColor: theme.colors.accent
              })
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: D(
              "flex-1 rounded-r",
              E({
                backgroundColor: theme.colors.neutral
              })
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "h3",
          {
            className: D(
              `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: theme.name
          }
        )
      ]
    }
  );
}
export {
  ThemePreview as default
};
//# sourceMappingURL=ThemePreview.js.map
