import { MIcon } from "@components/common/MIcon";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { ApprovalModalLayout } from "./layout";

export const Permit2ApprovalInfo = () => {
	const { data: activeRoute } = useActiveRoute();
	if (!activeRoute) return null;

	const primaryInput = activeRoute?.primaryInput;
	const token = primaryInput.token;

	return (
		<>
			<ApprovalModalLayout
				token={token}
				subtext="Approve this token once and trade gasless with just your signature."
			/>
			<a
				href="https://docs.bungee.exchange/bungee-auto/permit2/"
				target="_blank"
				className="bn-text-sm bn-font-normal bn-text-accent bn-mt-4 bn-w-full bn-text-center bn-flex bn-items-center bn-no-underline bn-justify-center"
				rel="noreferrer"
			>
				Learn how Bungee uses Permit2 Signatures{" "}
				<MIcon name="open_in_new" classNames="bn-text-base bn-ml-1" />
			</a>
		</>
	);
};
