import Lottie from "react-lottie";

import animationData from "@assets/lottie/moments/football/ballSwap.json";
import { twMerge } from "@utils/tailwindMerge";

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

export const BallsSwap = ({ classNames }: { classNames?: string }) => {
	const style = twMerge(
		"bn-absolute bn-w-full bn-bottom-0 bn-left-0",
		classNames,
	);

	return (
		<div className={style}>
			<Lottie options={lottieOptions} />
		</div>
	);
};
