"use client";

import React from "react";

interface LoadingButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    isLoading?: boolean;
    loadingText?: string;
    children: React.ReactNode;
    startIcon?: React.ReactNode;
    endIcon?: React.ReactNode;
}

const Button: React.FC<LoadingButtonProps> = ({
    isLoading = false,
    loadingText = "Loading...",
    children,
    startIcon,
    disabled,
    className = "",
    ...props
}) => {
    return (
        <button
            {...props}
            disabled={disabled || isLoading}
            className={`flex w-full items-center justify-center gap-2 rounded-lg bg-secondary py-3 font-semibold text-white transition hover:bg-black disabled:cursor-not-allowed disabled:opacity-70 ${className}`}
        >
            {isLoading && (
                <svg
                    className="h-5 w-5 animate-spin text-white"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                    />

                    <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
                    />
                </svg>
            )}

            {isLoading ? loadingText : children}
        </button>
    );
};

export default Button;