import { jsxs, jsx } from "react/jsx-runtime";
import { a as tx, c as css } from "./twind.DdSZmZu6.js";
import { u as useDraft } from "./use-page-data.CMUQyNAA.js";
function ThemePreview({
  theme,
  noPreview,
  className,
  selected,
  onClick
}) {
  useDraft();
  return /* @__PURE__ */ jsxs(
    "button",
    {
      type: "button",
      className: tx(
        "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",
        css({
          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__ */ jsx(
          "div",
          {
            className: tx(
              "flex-1 rounded-l",
              css({
                backgroundColor: theme.colors.primary
              })
            )
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: tx(
              "flex-1",
              css({
                backgroundColor: theme.colors.secondary
              })
            )
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: tx(
              "flex-1",
              css({
                backgroundColor: theme.colors.accent
              })
            )
          }
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: tx(
              "flex-1 rounded-r",
              css({
                backgroundColor: theme.colors.neutral
              })
            )
          }
        ),
        /* @__PURE__ */ jsx(
          "h3",
          {
            className: tx(
              noPreview ? "-translate-y-1/2 " : "translate-y-full scale-75 group-hover/theme-button:(-translate-y-1/2 scale-100)",
              `absolute  left-1/2 -translate-x-1/2 transition-all top-1/2 -bottom-6 h-6
          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 T
};
//# sourceMappingURL=ThemePreview.BTU09Boj.js.map
