"use client";
import React, {
	ButtonHTMLAttributes,
	DetailedHTMLProps,
	useEffect,
	useState,
	forwardRef,
} from "react";
import { cn } from "@repo/shared-components";

export const Button = forwardRef<
	HTMLButtonElement,
	DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
		isLoading?: boolean;
	}
>(({ isLoading, ...props }, ref) => {
	const [isLoadingState, setIsLoadingState] = useState(isLoading);

	useEffect(() => {
		setIsLoadingState(isLoading);
	}, [isLoading]);

	return (
		<button
			{...props}
			ref={ref}
			className={cn("btn", props.className)}
			disabled={isLoadingState || props.disabled}
			onClick={async (e) => {
				if (props.onClick) {
					setIsLoadingState(true);
					await props.onClick(e);
					setIsLoadingState(false);
				}
			}}
		>
			{isLoadingState && <span className="loading loading-spinner loading-sm"></span>}
			{props.children}
		</button>
	);
});

Button.displayName = "Button";