import Lottie from "react-lottie";

import type { Input, Output } from "@/types/index";
import animationData from "@assets/lottie/reviewArrow.json";
import { TokensStacked } from "./TokensStacked";

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

export const TokenDisplay = ({
	input,
	output,
}: {
	input: Input[];
	output: Output[];
}) => {
	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 bn-border-solid bn-border-subtle">
			<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>
	);
};
