import Lottie from "react-lottie";

import animationData from "@assets/lottie/reviewArrow.json";
import type { EndPoint } from "@hooks/apis/useFetchQuote";
import type { StatusEndPoint } from "@hooks/apis/useRequestStatus";
import { TokensStacked } from "./TokensStacked";

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

export const TokenDisplay = ({
	input,
	output,
}: {
	input: StatusEndPoint[] | EndPoint[];
	output: StatusEndPoint[] | EndPoint[];
}) => {
	return (
		<div className="bn-bg-layer-2 bn-px-2 bn-py-1.5 bn-rounded-full bn-flex bn-space-x-3 bn-items-center bn-border-2 bn-border-solid bn-border-primary">
			<div className="bn-flex bn-items-center">
				<TokensStacked endpoints={input} />
			</div>

			<div className="bn-size-fit">
				<Lottie options={animationOptions} width={15} />
			</div>

			<div className="bn-flex bn-items-center">
				<TokensStacked endpoints={output} />
			</div>
		</div>
	);
};
