import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "../utils/css";
import React, { useEffect, useMemo } from "react";
// TODO: add icon generate adpater
export const Coin = (props)=>{
    const [url, setUrl] = React.useState();
    useEffect(()=>{
        const img = new Image();
        img.onload = function() {
            setUrl(img.src);
        };
        img.onerror = function() {};
        // crypto logos
        // https://cryptologos.cc/logos/
        // img.src = `https://cryptologos.cc/logos/${props.name.toLowerCase()}-${props.size}.png?v=010`;
        img.src = `https://oss.orderly.network/static/symbol_logo/${props.name.toUpperCase()}.png`;
    }, []);
    const icon = useMemo(()=>{
        if (!url) {
            return null;
        }
        return /*#__PURE__*/ _jsx("img", {
            src: url,
            alt: props.name
        });
    }, [
        url
    ]);
    const size = useMemo(()=>{
        if (typeof props.size === "undefined") return "24px";
        if (props.size === "small") return "16px";
        if (props.size === "medium") return "24px";
        if (props.size === "large") return "32px";
        return `${props.size}px`;
    }, [
        props.size
    ]);
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-inline-block", props.className),
        style: {
            width: size,
            height: size,
            backgroundColor: props.backgroundColor
        },
        children: icon
    });
};

//# sourceMappingURL=coin.js.map