import React, { forwardRef } from 'react';
import { Button, ButtonProps } from './Button';
import { Icon } from './Icon';

export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'icon'> {
  icon: any;
  title?: string;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'low' | 'high';
}

export const IconButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, IconButtonProps>(({ 
  icon, 
  title,
  size = 'md',
  intent,
  ...props 
}, ref) => {
  const iconSizeMap: Record<string, any> = {
    sm: 3,
    md: 4,
    lg: 5
  };

  return (
    <Button 
      ref={ref}
      size={size}
      {...props}
    >
      <Icon icon={icon} size={iconSizeMap[size]} intent={intent} />
      {title && <span className="sr-only">{title}</span>}
    </Button>
  );
});

IconButton.displayName = 'IconButton';