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";
import { Dot } from "./Dot";

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

	// biome-ignore format:
	const wrapperStyle = `bn-flex bn-items-center bn-space-x-1 ${reverse ? 'bn-flex-row-reverse bn-space-x-reverse' : ''}`

	if (isManualQuote(route) || route.userOp === "tx") {
		return (
			<div className={wrapperStyle}>
				<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>
				{!noDot && <Dot />}
			</div>
		);
	}

	return (
		<div className={wrapperStyle}>
			<NoGasTag small />
			{!noDot && <Dot />}
		</div>
	);
};
