import { useSelector } from "react-redux";

import type { RefuelEndpoint } from "@hooks/apis/common/quote/types";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";
import { TokenIcon } from "./TokenIcon";

export const RefuelChip = ({ refuel }: { refuel: RefuelEndpoint }) => {
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	const formattedAmount = formatValue(refuel.amount, refuel.token.decimals);

	return (
		<div className="bn-flex bn-items-center bn-bg-layer-3 bn-border bn-border-solid bn-border-strong bn-p-1 bn-pr-2 bn-rounded-full bn-text-primary bn-aeonik-font bn-h-[28px]">
			<span>+{adjustDecimals(formattedAmount, 4, locale)}</span>
			<TokenIcon url={refuel.token.logoURI} classNames="bn-size-5 bn-ml-1" />
		</div>
	);
};
