import { useSelector } from "react-redux";

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

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

	function formatFee(fee: number) {
		if (fee < 0.01) {
			return "< $0.01";
		}
		return `$${adjustDecimals({
			value: fee,
			decimals: 2,
			locale,
		})}`;
	}

	if (isManualQuote(route) && !route.gasFee?.feeInUsd) return null;

	return (
		<div className="bn-flex bn-items-center bn-aeonik-font bn-space-x-1 bn-whitespace-nowrap bn-text-sm bn-text-medium">
			<MIcon name="local_gas_station" classNames="bn-text-base" />
			{isManualQuote(route) ? (
				<span>{formatFee(route.gasFee.feeInUsd)}</span>
			) : (
				<span>
					$0 <s>$0.05</s>
				</span>
			)}
		</div>
	);
};
