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

const DropdownButton = ({
  className,
  color = "black",
  hoverActive = true,
  fullwidth = false,
  loading = false,
  disabled = false,
  items,
  children,
  onClick,
  ...props
}) => {
  const btnClass = classNames(
    "btn btn--icon",
    `btn--${color}`,
    {
      "btn--hoveractive": hoverActive,
      "btn--fullwidth md:btn--autowidth": fullwidth,
      "btn--loading": loading,
    },
    className
  );

  const inner = (
    <div className="btn__body-wrap">
      <button className="btn__body" onClick={onClick} disabled={disabled}>
        {children}
      </button>
      <button className="btn__icon dropdown-button">
        <i className="ico--chevron-down"></i>
        <ul className="dropdown-button__choices bg-white text-black whitespace-no-wrap">
          {items}
        </ul>
      </button>
    </div>
  );

  return (
    <div className={btnClass} {...props}>
      {inner}
    </div>
  );
};

export default DropdownButton;