import type { Token } from "@/types/index";
import { TokenIcon } from "@components/common/TokenIcon";
import { useMappedChainData } from "@hooks/useMappedChainData";

export const ApprovalModalLayout = ({
	token,
	subtext,
}: { token: Token; subtext?: string }) => {
	const mappedChainData = useMappedChainData();
	const chain = mappedChainData?.[token.chainId];
	return (
		<>
			<div className="bn-relative bn-h-[56px] bn-w-[56px] bn-mx-auto bn-mb-4">
				<div className="bn-absolute bn-size-full bn-animate-ping bn-rounded-full bn-left-0 bn-top-0 bn-bg-layer-3" />
				<TokenIcon url={token.logoURI} classNames="bn-h-full bn-w-full" />

				{chain?.icon && (
					<TokenIcon
						url={chain.icon}
						classNames="bn-w-7 bn-h-7 bn-absolute bn-bottom-0 -bn-right-2"
					/>
				)}
			</div>

			<div className="bn-mb-4">
				<p className="bn-text-center bn-text-primary bn-font-medium bn-text-xl bn-mb-1">
					Approving {token.symbol} on {chain?.name}
				</p>
				<p className="bn-text-secondary bn-font-normal bn-text-sm bn-text-center">
					{/* {subtext ? "Approve this token once and trade gasless with just your signature." : ""} */}
					{subtext || "Confirm token approval in your wallet"}
				</p>
			</div>
		</>
	);
};
