import React from "react";
import classNames from "classnames";

const Button = ({
  className,
  iconWrapperClassName,
  icon,
  iconChildren = null,
  hoverActive = true,
  fullwidth = false,
  children,
  ...props
}) => {
  const btnClass = classNames(
    "btn",
    {
      "btn--icon": !!icon,
      "btn--hoveractive": hoverActive,
      "btn--fullwidth md:btn--autowidth": fullwidth,
    },
    className
  );

  const iconWrapperClass = classNames("btn__icon", iconWrapperClassName);

  return (
    <button className={btnClass} {...props}>
      <div className="btn__body-wrap">
        <div className="btn__body">{children}</div>
        {!!icon && (
          <div className={iconWrapperClass}>
            <i className={icon}></i>
            {iconChildren}
          </div>
        )}
      </div>
    </button>
  );
};

export default Button;