import type { ButtonHTMLAttributes } from 'react';

interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  /** Localized accessible name; also shown as the hover tooltip. */
  label: string;
  active?: boolean;
}

/** A compact icon-only button (issue #101): aria-label + title carry the
 * localized name, `active` marks toggles that are currently on. */
export function IconButton({
  label,
  active,
  className,
  children,
  ...rest
}: IconButtonProps): React.JSX.Element {
  const classes = ['icon-button', active ? 'icon-button--active' : '', className ?? '']
    .filter(Boolean)
    .join(' ');
  return (
    <button type="button" className={classes} aria-label={label} title={label} {...rest}>
      {children}
    </button>
  );
}