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

import { Icon } from "@/components/Icon";
import { CLASS_ROOT } from "./Tag";

export type TagButtonProps = {
  className?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  children?: React.ReactNode;
  isDisabled?: boolean;
  ariaLabel?: string;
  iconName: string;
  size?: string; // Add size prop that will be passed from Tag component
};

const CLASS_NAME = `${CLASS_ROOT}__action`;

const TagButton = React.forwardRef<HTMLButtonElement, TagButtonProps>(
  (props, ref) => {
    const {
      className,
      onClick,
      isDisabled,
      iconName,
      ariaLabel,
      size,
      ...other
    } = props;

    const classes = cx(
      CLASS_NAME,
      {
        [`${CLASS_NAME}--${size}`]: size,
      },
      className,
    );

    function iconSize() {
      switch (size) {
        case "large":
          return "medium";
        default:
          return "small";
      }
    }

    return (
      <button
        type="button"
        className={classes}
        onClick={onClick}
        disabled={isDisabled ? true : undefined}
        aria-disabled={isDisabled ? "true" : undefined}
        aria-label={ariaLabel}
        ref={ref}
        {...other}
      >
        <Icon size={iconSize()} name={iconName} />
      </button>
    );
  },
);

TagButton.displayName = "TagButton";

export { TagButton };
