import React, { ButtonHTMLAttributes, ReactNode } from 'react';
import styles from './ButtonActionIcon.module.scss';

export type ButtonActionIconProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> & {
    icon: ReactNode;
    /** Nome acessível obrigatório para botões apenas com ícone (leitores de tela e teclado). */
    'aria-label': string;
    title?: string;
    variant?: 'primary' | 'secondary' | 'action';
    className?: string;
};

export function ButtonActionIcon({
    icon,
    title,
    variant = 'action',
    className = '',
    disabled,
    'aria-label': ariaLabel,
    ...props
}: ButtonActionIconProps) {
    const label = ariaLabel.trim();
    if (!label && process.env.NODE_ENV !== 'production') {
        console.warn('[ButtonActionIcon] aria-label não pode ser vazio.');
    }

    const buttonClass = [
        styles.btnActionIcon,
        variant === 'primary' && styles.primary,
        variant === 'secondary' && styles.secondary,
        disabled && styles.disabled,
        className,
    ]
        .filter(Boolean)
        .join(' ');

    return (
        <button
            className={buttonClass}
            title={title ?? ariaLabel}
            aria-label={ariaLabel}
            disabled={disabled}
            {...props}
        >
            <span aria-hidden="true">{icon}</span>
        </button>
    );
}