import type { ButtonHTMLAttributes } from "react";
import { IconGlyph } from "./IconGlyph";

export interface IconButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
  icon: string;
  label: string;
  active?: boolean;
  type?: "button" | "submit" | "reset";
}

export function IconButton({
  icon,
  label,
  active = false,
  disabled = false,
  type = "button",
  className = "",
  ...buttonProps
}: IconButtonProps) {
  return (
    <button
      {...buttonProps}
      className={className ? `icon-button ${className} ` : "icon-button "}
      aria-label={label}
      data-active={active}
      disabled={disabled}
      type={type}
    >
      <IconGlyph name={icon} size="sm" />
    </button>
  );
}