"use client";

import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import { FaSpinner } from "react-icons/fa";
import Loader from "../Loader";
import { useRouterNavigation } from "@/hooks/useRouterNavigation";

interface LoadingButtonProps {
    children: React.ReactNode;
    href?: string; // opsional, kalau ada maka otomatis navigate
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    type?: "button" | "submit" | "reset";
    disabled?: boolean;
    loading?: boolean; // 👈 prop baru
    className?: string;
}

export default function LoadingButton({
    children,
    href,
    onClick,
    type = "button",
    disabled = false,
    loading: externalLoading, // kalau dikontrol dari luar
    className = "",
}: LoadingButtonProps) {
    const { navigate } = useRouterNavigation();
    const [internalLoading, setInternalLoading] = useState(false);

    const loading = externalLoading ?? internalLoading;

    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
        if (disabled || loading) return;

        if (onClick) onClick(e);

        if (href) {
            setInternalLoading(true);
            navigate(href);
        }
    };

    // reset loading kalau externalLoading = false
    useEffect(() => {
        if (externalLoading === false) {
            setInternalLoading(false);
        }
    }, [externalLoading]);

    return (
        <button
            type={type}
            onClick={handleClick}
            disabled={disabled || loading}
            className={`flex items-center justify-center px-6 py-3 rounded-xl font-semibold transition duration-200 ease-in-out focus:outline-none disabled:opacity-70 disabled:cursor-not-allowed ${className}`}
        >
            {loading ? (
                <>
                    <Loader size="small"/>
                </>
            ) : (
                children
            )}
        </button>
    );
}