/** IconButton — a square, icon-only button (close ×, toolbar actions) (LD). */

import { forwardRef } from "react";

import { cn } from "../lib/cn";

export type IconButtonSize = "sm" | "md";

export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Required accessible name (icon-only buttons have no text). */
  "aria-label": string;
  /** Control size. Defaults to `md`. */
  size?: IconButtonSize;
}

const SIZES: Record<IconButtonSize, string> = {
  sm: "h-6 w-6 text-xs",
  md: "h-8 w-8 text-sm",
};

/** A compact, icon-only button styled as a ghost control. */
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
  { size = "md", className, children, ...rest },
  ref,
) {
  return (
    <button
      ref={ref}
      type={rest.type ?? "button"}
      className={cn(
        "inline-flex items-center justify-center rounded-md text-muted transition-colors",
        "hover:bg-raised hover:text-content focus-visible:outline-none",
        "disabled:opacity-50 disabled:cursor-not-allowed",
        SIZES[size],
        className,
      )}
      {...rest}
    >
      {children}
    </button>
  );
});