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

const LoadingButton = ({
  className,
  variant,
  size,
  loading,
  ...props
}: ButtonProps & { loading?: boolean }) => {
  return (
    <Button
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    >
      {loading && (
        <LoaderCircle
          className="-ms-1 me-2 animate-spin"
          size={16}
          strokeWidth={2}
          aria-hidden="true"
        />
      )}
      {props.children}
    </Button>
  );
};

export default LoadingButton;