portabase/src/components/wrappers/common/button/button-with-loading.tsx

"use client";

import { Button } from "@/components/ui/button";
import { ButtonHTMLAttributes } from "react";
import { Loader2 } from "lucide-react";

export type VariantButton = {
    secondary: string;
    default: string;
    outline: string;
    ghost: string;
    link: string;
    destructive: string;
};
export type sizeButton = {
    default: string;
    icon: string;
    sm: string;
    lg: string;
};

export type ButtonWithConfirmProps = {
    icon?: any;
    text: string;
    variant?: keyof VariantButton;
    className?: string;
    onClick: () => void;
    isPending?: boolean;
    size: keyof sizeButton;
};

export const ButtonWithLoading = ({
    icon,
    text,
    variant,
    className,
    onClick,
    isPending,
    size,
    ...props // catch all remaining props
}: ButtonWithConfirmProps & ButtonHTMLAttributes<HTMLButtonElement>) => {
    return (
        <Button
            onClick={() => {
                onClick();
            }}
            variant={variant ? variant : "default"}
            className={className}
            {...props} // forward the remaining props to the Button component
            size={size || "default"}
        >
            {isPending && <Loader2 className="animate-spin mr-4" size={16} />}
            {text}
            <>{icon ? icon : null}</>
        </Button>
    );
};