"use client";
import { jsx as e, jsxs as b } from "react/jsx-runtime";
import { useState as o, useRef as E, useEffect as c } from "react";
import { createPortal as L } from "react-dom";
import { cn as M } from "../../../utils/cn/cn.es.js";
import s from "../../../components/Cursor/components/clientCursor.module.css";
import { Typography as w } from "../../Typography/Typography.es.js";
function R({ children: l, label: a, colorScheme: m }) {
  const [t, d] = o({ x: 0, y: 0 }), [f, r] = o(!1), p = E(null), [v, n] = o(!1);
  c(() => (n(!0), () => n(!1)), []), c(() => {
    const i = (u) => {
      d({ x: u.clientX, y: u.clientY });
    };
    return window.addEventListener("mousemove", i), () => window.removeEventListener("mousemove", i);
  }, []);
  const h = () => {
    r(!0);
  }, x = () => {
    r(!1);
  }, y = /* @__PURE__ */ e(
    "div",
    {
      ref: p,
      className: M(s.cursor, {
        [s.cursorVisible]: f
      }),
      style: {
        left: `${t.x}px`,
        top: `${t.y}px`
      },
      "data-color-scheme": m,
      children: /* @__PURE__ */ e(w, { as: "p", emphasis: !0, defaultVariant: "labelLg", children: a })
    }
  );
  return /* @__PURE__ */ b("div", { children: [
    /* @__PURE__ */ e("div", { className: s.cursorContainer, onMouseEnter: h, onMouseLeave: x, children: l }),
    v && L(y, document.body)
  ] });
}
export {
  R as ClientCursor
};
