import classNames from "classnames";

type ButtonProps = React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
> & {
  solid?: boolean;
  primary?: boolean;
  black?: boolean;
  red?: boolean;
  loading?: boolean;
};

export default function Button({
  primary,
  red,
  className,
  children,
  loading,
  disabled,
  solid,
  ...otherProps
}: ButtonProps) {
  const isDisabled = loading || disabled;
  const isDefault = !primary && !red;
  return (
    <button
      {...otherProps}
      className={classNames(
        "uikit-h-[52px] uikit-w-full uikit-rounded-lg uikit-font-poppins uikit-text-base uikit-font-medium uikit-transition-all",
        {
          "uikit-border uikit-border-tc1/10 dark:uikit-border-tc1-dark/10 uikit-bg-white dark:uikit-bg-white-dark uikit-text-tc1 dark:uikit-text-tc1-dark":
            isDefault,
          "uikit-border-none uikit-bg-primary dark:uikit-bg-primary-dark uikit-text-white dark:uikit-text-[#12122a]":
            primary && !solid,
          "uikit-border uikit-border-primary dark:uikit-border-primary-dark uikit-bg-transparent uikit-text-white dark:uikit-text-[#12122a]":
            primary && solid,
          "uikit-border-none uikit-bg-d uikit-text-white dark:uikit-text-white-dark":
            red && !solid,
          "uikit-border uikit-border-danger uikit-bg-transparent uikit-text-danger":
            red && solid,
          "uikit-pointer-events-none": loading,
          "uikit-cursor-pointer hover:uikit-opacity-90": !isDisabled,
          "uikit-cursor-not-allowed uikit-opacity-20": isDisabled,
        },
        className,
      )}
      disabled={isDisabled || loading}
    >
      <div
        className={
          "uikit-flex uikit-gap-2 uikit-items-center uikit-justify-center"
        }
      >
        {children}
      </div>
    </button>
  );
}