import { LoaderCircle } from "lucide-react";
import {
	Button,
	type ButtonProps,
	buttonVariants,
} from "~/components/ui/button";
import { cn } from "~/lib/utils";

const LoadingButton = ({
	className,
	variant,
	size,
	loading,
	...props
}: ButtonProps & { loading?: boolean }) => {
	return (
		<Button
			className={cn(
				buttonVariants({ className, size, variant }),
				loading && "text-transparent",
			)}
			disabled={loading || props.disabled}
			{...props}
		>
			{loading && <LoaderCircle className="absolute animate-spin text-muted" />}
			{props.children}
		</Button>
	);
};

export default LoadingButton;
