import React, { forwardRef } from 'react';

type IconButtonProps = {
  children: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  className?: string;
  disabled?: boolean;
  title?: string;
  size?: 'sm' | 'md' | 'lg';
  active?: boolean;
};

const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  ({ children, onClick, className = '', disabled, title, size = 'md', active }, ref) => {
    const sizeClasses: Record<string, string> = {
      sm: 'w-8 h-8 text-[18px]',
      md: 'w-10 h-10 text-[20px]',
      lg: 'w-12 h-12 text-[22px]',
    };

    return (
      <button
        ref={ref}
        type="button"
        title={title}
        disabled={disabled}
        onClick={onClick}
        className={`
          inline-flex items-center justify-center rounded-full
          text-[var(--tg-text-secondary)]
          transition-colors duration-150
          hover:bg-[var(--tg-bg-secondary)]
          active:bg-[var(--tg-divider)]
          ${active ? 'text-[var(--tg-accent)] bg-[var(--tg-accent-soft)]' : ''}
          ${sizeClasses[size]}
          ${disabled ? 'opacity-40 pointer-events-none' : ''}
          ${className}
        `}
      >
        {children}
      </button>
    );
  }
);

IconButton.displayName = 'IconButton';

export default IconButton;
