import cx from "classnames";
import React from "react";

import ToggleButton from "../../docs/utils/ToggleButton";

import { CLASS_ROOT } from "./constants";

interface DropdownToggleButtonProps
  extends React.HTMLAttributes<HTMLButtonElement> {
  id: string;
  className?: string;
}

const DropdownToggleButton: React.FC<DropdownToggleButtonProps> = ({
  className,
  id,
  ...other
}) => {
  return (
    <ToggleButton
      aria-expanded={false}
      id={`btn-${id}`}
      data-toggle={JSON.stringify([
        {
          target: "self",
          attribute: "aria-expanded",
        },
      ])}
      {...other}
      className={cx(`${CLASS_ROOT}__button mb-none`, className)}
    />
  );
};

DropdownToggleButton.displayName = "DropdownToggleButton";

export { DropdownToggleButton };