"use client";
import { motion } from "motion/react";
import { format } from "../../../../lib/utils";
import { Tick as Style } from "./Orderbook.styled";
export function Tick({ price, balance, max, onClick, onMouseEnter }) {
    return (<Style key={price} onClick={(e) => onClick?.(e)} onMouseEnter={(e) => onMouseEnter?.(e)} as={motion.div} initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.9, opacity: 0 }} transition={{ duration: 0.3 }} layout>
            <div>
                <div>
                    <div>
                        <span>{format(balance, "currency", { unit: 9, limit: 12, fix: 3 })}</span>
                    </div>
                    <div style={{
            backgroundSize: `${(parseFloat(balance.toString()) / max) * 100 > 100
                ? "100"
                : (parseFloat(balance.toString()) / max) * 100 < 0
                    ? "0"
                    : (parseFloat(balance.toString()) / max) * 100}% 100%`,
        }}>
                        <span>{format(price, "currency", { unit: 9, limit: 12, fix: 3 })}</span>
                    </div>
                </div>
            </div>
            {/* <div>
                                    <Controls.Button>Order</Controls.Button>
                                </div> */}
        </Style>);
}
//# sourceMappingURL=Tick.jsx.map