import React from "react";
import Lottie from "react-lottie";
import animationData from "../../../assets/lottie/refresh.json";
import { useFetchQuote } from "../../hooks/apis/useFetchQuote";

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

	// biome-ignore format:
	const style = `bn-w-6 bn-h-6 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={20}
				height={20}
				isClickToPauseDisabled
				isStopped={isRefetching || isLoading}
			/>
		</button>
	);
};
