import React, { ButtonHTMLAttributes, forwardRef } from "react";
import classNames from "classnames";
import { Icon, ICON_TYPE } from "../Icon";
import { bem } from "../../utilities/bem";

const cn = "CloseButton";

type CloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
  (props, ref) => {
    const { "aria-label": ariaLabel = "Close", className, ...rest } = props;

    return (
      <button
        className={classNames(bem(cn), className)}
        aria-label={ariaLabel}
        type="button"
        ref={ref}
        {...rest}
      >
        <Icon icon={ICON_TYPE.TIMES} />
      </button>
    );
  },
);