import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import styled from "styled-components";
import BNB from "./coin-icons/bnb";
import BTC from "./coin-icons/btc";
import BUSD from "./coin-icons/busd";
import CRV from "./coin-icons/crv";
import DAI from "./coin-icons/dai";
import EOS from "./coin-icons/eos";
import EQ from "./coin-icons/eq";
import EQD from "./coin-icons/eqd";
import ETH from "./coin-icons/eth";
import GENS from "./coin-icons/gens";
import KSM from "./coin-icons/ksm";
import LPT0 from "./coin-icons/lpt-0";
import MOVR from "./coin-icons/movr";
import USD from "./coin-icons/usd";
import USDC from "./coin-icons/usdc";
import USDT from "./coin-icons/usdt";
import WBTC from "./coin-icons/wbtc";
import XDOT from "./coin-icons/xdot";
import XDOT2 from "./coin-icons/xdot2";
import HDOT from "./coin-icons/hdot";
const DEFAULT_ICON = "Lpt0";
export const ICONS = {
    Bnb: BNB,
    Btc: BTC,
    Busd: BUSD,
    Crv: CRV,
    Dai: DAI,
    Eos: EOS,
    Eq: EQ,
    Eqd: EQD,
    Eth: ETH,
    Gens: GENS,
    Ksm: KSM,
    Lpt0: LPT0,
    Movr: MOVR,
    Usd: USD,
    Usdc: USDC,
    Usdt: USDT,
    Wbtc: WBTC,
    Xdot: XDOT,
    Xdot2: XDOT2,
    Hdot: HDOT,
};
const capitalize = function (s) {
    return s
        .split("")
        .map((v, i) => (i === 0 ? v.toUpperCase() : v.toLowerCase()))
        .join("");
};
const getIcon = ({ token, url }) => {
    const capitalizedToken = capitalize(token);
    if (ICONS.hasOwnProperty(capitalizedToken)) {
        // @ts-ignore
        return ICONS[capitalizedToken];
    }
    return url
        ? (props) => _jsx("img", { ...props, src: url })
        : ICONS[DEFAULT_ICON];
};
const CoinPlaceholder = styled.div `
  display: grid;
  place-items: center;
  border-radius: 50%;
  min-width: ${({ size }) => `${size ?? 28}px`};
  min-height: ${({ size }) => `${size ?? 28}px`};
  width: ${({ size }) => `${size ?? 28}px`};
  height: ${({ size }) => `${size ?? 28}px`};
  padding: ${({ padding }) => padding ?? "5px"};
  background: ${({ theme, background }) => background ? background : theme.new?.colors?.primary210 ?? "#E4D5B2"};

  .ui-coin__icon {
    width: 100%;
    height: 100%;
  }
`;
export const Coin = ({ token, size, backgroundColor, placeholder = true, placeholderPadding, url, className = "", }) => {
    const Icon = useMemo(() => {
        return getIcon({ token, url });
    }, [token, url]);
    if (!placeholder)
        return (_jsx(Icon, { className: `ui-coin__icon ${className}`, height: size, width: size }));
    return (_jsx(CoinPlaceholder, { className: `ui-coin__placeholder ${className}`, size: size, background: backgroundColor, padding: placeholderPadding, children: _jsx(Icon, { className: "ui-coin__icon" }) }));
};
//# sourceMappingURL=coin.js.map