import Lottie from "react-lottie";

import animationData from "@assets/lottie/refresh30.json";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";

export const RefreshButton = ({ onClick }: { onClick: () => void }) => {
	const { isLoading, isRefetching } = useActiveRoute();
	const animationOptions = {
		loop: true,
		autoplay: true,
		animationData: animationData,
		renderSettings: {
			preserveAspectRatio: "xMidyMid slice",
		},
	};

	// biome-ignore format:
	const style = `bn-size-9 bn-bg-transparent bn-p-0 bn-flex bn-items-center bn-justify-center bn-cursor-pointer bn-border-0 ${isLoading || isRefetching ? 'bn-animate-spin': ''}`

	return (
		<button className={style} type="button" onClick={onClick}>
			<Lottie
				options={animationOptions}
				width={24}
				height={24}
				isClickToPauseDisabled
				isStopped={isRefetching || isLoading}
			/>
		</button>
	);
};
