import { ReactNode } from "react";

import "./IconButton.css";
import { getCN, renderProps } from "../utils";
import ButtonTouch from "../ButtonTouch/ButtonTouch";

function IconButton({
  children,
  stopPropagation = true,
  preventDefault = `auto`,
  onClick,
  href,
  target,
  mode = "l",
  background = false,
  after,
  ...props
}: {
  [x: string]: any;
  mode?: "l" | "m"
}) {
  if (preventDefault == `auto`) {
    preventDefault = true;
    if (href) preventDefault = false;
  }
  return (
    <div
      {...props}
      data-after_or_before={after ? true : false}
      data-background={background}
      data-mode={mode}
      className={getCN(["MYUI-IconButton"], props.className)}>
      <ButtonTouch
        href={href}
        target={target}
        onClick={onClick}
        preventDefault={preventDefault}
        stopPropagation={stopPropagation}
        {...props}
        componentName="MYUI-IconButton--touch"
        modeActive="background"
        mode="background"
      >
        <div className={getCN(["MYUI-IconButton__in"])}>
          <div className={getCN(["MYUI-IconButton__children"])}>{children}</div>
          {after && <div className={getCN(["MYUI-IconButton__after"])}>{after}</div>}
        </div>
      </ButtonTouch>
    </div>
  );
}

export default IconButton;