import type { ButtonHTMLAttributes } from "react";

interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  "aria-label": string;
  danger?: boolean;
}

export function IconButton({
  "aria-label": ariaLabel,
  danger = false,
  type = "button",
  className = "",
  ...props
}: IconButtonProps) {
  return (
    <button
      type={type}
      aria-label={ariaLabel}
      className={`inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:opacity-50 ${
        danger ? "text-danger hover:bg-danger/10" : "text-muted hover:bg-paper hover:text-ink"
      } ${className}`}
      {...props}
    />
  );
}