import { useSelector } from "react-redux";

import { MIcon } from "@components/common/MIcon";
import { NoGasTag } from "@components/common/NoGasTag";
import type { FormattedQuoteResponse } from "@hooks/apis/common/quote/types";
import { isManualQuote } from "@hooks/apis/common/quote/useQuote";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";

export const Fees = ({
	route,
}: { route: FormattedQuoteResponse; reverse?: boolean; noDot?: boolean }) => {
	const locale = useSelector((state: ReduxStateType) => state.settings.language);

	if (isManualQuote(route) || route.userOp === "tx") {
		return (
			<div className="bn-flex bn-items-center bn-text-secondary bn-aeonik-font">
				<MIcon name="local_gas_station" classNames="bn-text-base" />
				{route?.gasFee && (
					<span>${adjustDecimals(route.gasFee.feeInUsd.toString(), 2, locale)}</span>
				)}
			</div>
		);
	}

	return <NoGasTag small classNames="bn-text-secondary" />;
};
