import roundCheckedWhiteSvg from "@/assets/images/round-checked-white.svg";
import spiner2Svg from "@/assets/images/spiner2.svg";
import classNames from "classnames";

type ButtonProps = React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
> & {
  theme?: "white" | "ghost";
  shape?: "round" | "default";
  size?: "default" | "small" | "large" | "icon";
  block?: boolean;
  status?: ButtonStatusType;
  // | 'ghost-gray'
  // | 'ghost-black'
  // | 'ghost-primary'
};
export type ButtonStatusType = "normal" | "loading" | "success";
export function Button(props: ButtonProps) {
  const {
    theme = "primary",
    shape = "default",
    size = "default",
    disabled,
    block = false,
    status = "normal",
    className,
    ...otherProps
  } = props;
  return (
    <button
      disabled={disabled}
      {...otherProps}
      className={classNames(
        "uikit-flex uikit-items-center uikit-justify-center uikit-font-medium disabled:uikit-bg-bg3 disabled:uikit-text-t4 uikit-text-base ",
        {
          " uikit-cursor-not-allowed uikit-bg-gray-50 !uikit-text-title":
            disabled,
          " uikit-w-full ": block,
          " uikit-px-[16px] ": !block,
          " uikit-w-[40px] uikit-h-[40px] uikit-rounded-[8px] !uikit-p-0 ":
            size === "icon",
          " uikit-bg-red uikit-text-[#FFFFFF] uikit-border-0":
            theme === "primary",
          " uikit-bg-[#F2F4F6] uikit-text-btn ": theme === "white",
          " uikit-bg-bg4 uikit-border uikit-border-[#D1D1D8] uikit-border-solid uikit-text-t1":
            theme === "ghost",
          " uikit-rounded-[8px] ": shape === "default",
          " uikit-rounded-full ": shape === "round",
          " uikit-h-[36px] uikit-text-[14px] ": size === "default",
          "  uikit-h-[32px] uikit-text-[14px] ": size === "small",
          " uikit-h-[48px] uikit-text-[16px] ": size === "large",
          " !uikit-bg-[#17CF82]": status === "success",

          // 'border border-white-300': theme === 'ghost-gray',
          // 'border border-black text-black': theme === 'ghost-black',
          // 'border border-primary text-primary': theme === 'ghost-primary'
        },
        className
      )}
    >
      {status === "loading" && (
        <img src={spiner2Svg} className="uikit-size-9 uikit-animate-spin" />
      )}
      {status === "success" && (
        <img src={roundCheckedWhiteSvg} className="uikit-size-9" />
      )}
      {status === "normal" && otherProps.children}
    </button>
  );
}