import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
import { Loader } from "./Loader";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  isLoading?: boolean;
  children: ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  onClick,
  isLoading = false,
  children,
  className = "",
  ...props
}) => {
  return (
    <button
      onClick={onClick}
      className={`
        cursor-pointer mx-auto bg-chatcolor text-white font-bold rounded-full my-6 py-4 px-8
        shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105
        duration-300 ease-in-out ${className}
      `}
      {...props}
    >
      {isLoading ? (
        <div className="flex items-center cursor-progress">
          {children}
          <Loader radius={20} className="ml-2" />
        </div>
      ) : (
        children
      )}
    </button>
  );
};