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

export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'icon'> {
  icon: any;
  title?: string;
}

export const IconButton = ({ 
  icon, 
  title,
  size = 'md',
  ...props 
}: IconButtonProps) => {
  const iconSizeMap = {
    sm: 3,
    md: 4,
    lg: 5
  } as const;

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