import React from 'react';
import MuiIconButton from '@mui/material/IconButton';
import type { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA IconButton component */
export interface IconButtonProps extends MuiIconButtonProps {}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Icon-only button for the FA design system.
 *
 * Square button containing a single icon — used for close buttons, menu
 * toggles, toolbar actions, and anywhere a text label would be redundant.
 * Wraps MUI IconButton with FA brand tokens and consistent sizing.
 *
 * Sizes use the same height scale as Button:
 * - `small` — 32px (compact toolbars, card actions)
 * - `medium` — 40px (default, general actions)
 * - `large` — 48px (mobile CTAs, meets 44px touch target)
 *
 * **Accessibility**: Always provide an `aria-label` prop. Icon-only
 * buttons have no visible text, so screen readers rely entirely on
 * the aria-label to announce the action.
 * ```tsx
 * <IconButton aria-label="Close dialog">
 *   <CloseIcon />
 * </IconButton>
 * ```
 */
export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
  (props, ref) => {
    return <MuiIconButton ref={ref} {...props} />;
  },
);

IconButton.displayName = 'IconButton';
export default IconButton;