import * as React from 'react';
import styles from './IconButton.module.scss';
import { Icon } from '../Icon/Icon';
import { IconName } from '../Icon/iconNames';

export interface IIconButtonProps {
  icon: IconName;
  /** Подсказка (tooltip) и a11y-подпись — обязательна: кнопка без текста. */
  title: string;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
  /** Акцент удаления (красный ховер). */
  danger?: boolean;
  size?: 'sm' | 'md';
  className?: string;
}

/** Кнопка-иконка (удалить/переместить/заменить). Иконка — из общего спрайта. */
export const IconButton: React.FC<IIconButtonProps> = ({
  icon,
  title,
  onClick,
  disabled,
  danger,
  size = 'md',
  className
}) => {
  const classes = [styles.btn, size === 'sm' ? styles.sm : '', danger ? styles.danger : '', className]
    .filter(Boolean)
    .join(' ');
  return (
    <button type="button" className={classes} title={title} aria-label={title} disabled={disabled} onClick={onClick}>
      <Icon name={icon} size={size === 'sm' ? 'sm' : 'md'} />
    </button>
  );
};