import React, { useMemo } from "react";
import { useRootElement } from "../context";
import { Gauge } from "./Gauge";
import { Needle } from "./Needle";
import * as styles from "./styles";
export const BuyerSellerMarket = ({ buyerSellerPercentage, labels, }) => {
    const { sellerColor, neutralColor, buyerColor } = useRootElement();
    const needleStyle = useMemo(() => ({
        transform: `translate(-50%, 0) rotate(${buyerSellerPercentage * 1.8 - 90}deg)`,
        transformOrigin: "50% 100%",
    }), [buyerSellerPercentage]);
    return (React.createElement("div", { className: styles.container },
        React.createElement("span", { className: styles.label }, labels.neutral),
        React.createElement("div", { className: styles.wrapper },
            React.createElement("span", { className: styles.label }, labels.seller),
            React.createElement("div", { className: styles.gauge },
                React.createElement(Gauge, { sellerColor: sellerColor, neutralColor: neutralColor, buyerColor: buyerColor }),
                React.createElement("div", { className: styles.needle, style: needleStyle },
                    React.createElement(Needle, null))),
            React.createElement("span", { className: styles.label }, labels.buyer))));
};
//# sourceMappingURL=index.js.map