import { useEditor } from "@/modules/editor";
import { defineUI } from "queenjs";
import { TipIcons } from "../../TipIcons";
import { css } from "@linaria/core";

export default defineUI({
  setup() {
    const { actions } = useEditor();
    return () => (
      <div class="absolute top-20px right-20px">
        <TipIcons.Screenshot
          class={btnCls}
          onClick={() => actions.updateThumbnailByScreenshot(true)}
        />
      </div>
    );
  },
});

const btnCls = css`
  padding: 10px;
  border-radius: 50%;
  background-color: #333;
  @apply shadow;
`;