import { jsxs as p, jsx as f } from "react/jsx-runtime";
import { prettifyCurrencyValue as m } from "@argent/x-shared";
import { Center as d } from "@chakra-ui/react";
import { useCurrency as x } from "../../features/providers/CurrencyProvider.js";
import "../Typography.js";
import { L1Bold as u } from "../typography.generated.js";
const a = ({ crosshair: t, children: n, ...i }) => {
  const e = x();
  if (!t)
    return null;
  const o = t.x < t.width / 2, r = o ? `${t.x}px` : void 0, l = o ? void 0 : `${t.width - t.x}px`;
  return /* @__PURE__ */ p(d, { textAlign: "center", flexDirection: "column", px: 2, py: 1, position: "absolute", left: r, right: l, top: `${t.y}px`, bgColor: "surface-brand", color: "surface-default", borderRadius: "lg", fontWeight: "semibold", pointerEvents: "none", zIndex: 2, ...i, children: [
    /* @__PURE__ */ f(u, { children: m(t.price, e == null ? void 0 : e.symbol) }),
    n
  ] });
};
export {
  a as TokenDetailsChartTooltip
};
