import React, { useMemo } from "react";
import * as Popover from "@radix-ui/react-popover";
import { InfoIcon, XIcon } from "@phosphor-icons/react";
import * as styles from "./styles";
import useIsMobile from "~/hooks/useIsMobile";
export function InfoPopover({ children, change, }) {
    const isMobile = useIsMobile();
    const side = useMemo(() => (isMobile ? "bottom" : "right"), [isMobile]);
    if (change === null || change === 0) {
        return null;
    }
    return (React.createElement(Popover.Root, null,
        React.createElement(Popover.Trigger, null,
            React.createElement(InfoIcon, { className: styles.icon })),
        React.createElement(Popover.Content, { className: styles.content, side: side, sideOffset: 4 },
            children,
            React.createElement(Popover.Close, null,
                React.createElement(XIcon, { className: styles.close, weight: "bold" })))));
}
//# sourceMappingURL=index.js.map