import React from "react";
import { overrideTailwindClasses } from "tailwind-override";

export type ButtonProps = {
  children: JSX.Element;
  disabled?: boolean;
  customColor?: string;
  loading?: boolean;
  fullWidth?: boolean;
  className?: string;
  component?: Element | string;
};

function Button({
  children,
  disabled,
  loading,
  fullWidth,
  className = "",
  component = "button",
  ...rest
}: ButtonProps) {
  let customClasses = " ";
  if (loading) customClasses += "  loading text-gray-300";
  if (fullWidth) customClasses += " w-full";

  const Component: any = component;

  return (
    <Component
      disabled={disabled || loading}
      {...rest}
      className={overrideTailwindClasses(`btn px-4 py-2 tracking-wide text-white transition-colors duration-200 
          transform bg-sky-600 hover:bg-sky-700 active:bg-sky-800 hover:bg-sky-600 rounded focus:outline-none 
           disabled:text-gray-800 disabled:bg-gray-300 ${className} ${customClasses}`)}
    >
      {children}
    </Component>
  );
}

export default Button;