import { useSelector } from "react-redux";

import { Stars } from "@components/common/Icons";
import type { RebateDetails } from "@hooks/apis/useFetchQuote";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { formatValue } from "@utils/formatValue";

export const RewardsBar = ({
	rebateDetails,
}: { rebateDetails?: RebateDetails }) => {
	const locale = useSelector((state: ReduxStateType) => state.settings.language);

	const token = rebateDetails?.token;
	const amount = rebateDetails?.amount || "0"; // 0 is returned when rebates not available

	if (!rebateDetails || amount === "0" || !token) return null;

	const formattedAmount = formatValue(amount, token.decimals);

	return (
		<div className="bn-bg-[#277A4E] bn-p-2 bn-rounded-lg bn-flex bn-items-center bn-justify-between bn-px-4 bn-py-2.5 bn-mt-2">
			<div className="bn-flex bn-items-center bn-space-x-1.5">
				<Stars height={20} width={20} fill="#ffffff" />
				<span className="bn-text-white bn-font-semibold">
					Est. Rewards: ~{adjustDecimals(formattedAmount, 3, locale)} {token.symbol}
				</span>
			</div>

			<a
				href="https://dune.com/socketprotocol/bungee-superspin"
				target="_blank"
				className="bn-underline bn-text-white bn-text-sm bn-font-medium"
				rel="noreferrer"
			>
				Leaderboard
			</a>
		</div>
	);
};
