import Lottie from "react-lottie";

import searchAnimationData from "@assets/lottie/inflight/search.json";
import { TokenIcon } from "@components/common/TokenIcon";

const searchAnimationOptions = {
	loop: true,
	autoplay: true,
	animationData: searchAnimationData,
	renderSettings: {
		preserveAspectRatio: "xMidyMid slice",
	},
};

export const PendingState = ({ tokenUrl }: { tokenUrl: string }) => {
	return (
		<div className="bn-w-full bn-h-full bn-relative bn-flex bn-items-center bn-justify-center">
			<div className="bn-absolute bn-top-0 bn-right-0">
				<Lottie options={searchAnimationOptions} />
			</div>

			<TokenIcon url={tokenUrl} classNames="bn-size-[80px]" />
		</div>
	);
};
