import type { ButtonHTMLAttributes, ReactNode } from 'react';

export type IconButtonVariant = 'neutral' | 'add' | 'danger';

export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
  icon: ReactNode;
  variant?: IconButtonVariant;
  loading?: boolean;
}

export function IconButton({
  label,
  icon,
  variant = 'neutral',
  loading = false,
  className,
  disabled,
  title,
  ...props
}: IconButtonProps) {
  const classes = [
    'ui-icon-button',
    `ui-icon-button--${variant}`,
    loading ? 'is-loading' : '',
    className ?? '',
  ].filter(Boolean).join(' ');

  return (
    <button
      {...props}
      type={props.type ?? 'button'}
      className={classes}
      aria-label={label}
      title={title ?? label}
      disabled={disabled || loading}
    >
      {loading ? <span className="ui-button-spinner" aria-hidden="true" /> : icon}
    </button>
  );
}

