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

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

export function IconButton({
  onClick,
  title,
  ariaLabel,
  children,
  active,
  className,
  size = 'sm',
}: IconButtonProps) {
  const padClasses = size === 'md' ? 'p-1' : 'p-0.5';
  const colorClasses = active
    ? 'text-teal-600 dark:text-teal-400'
    : 'text-warm-400 hover:text-warm-700 dark:hover:text-warm-300';

  return (
    <button
      type="button"
      onClick={onClick}
      title={title}
      aria-label={ariaLabel ?? title}
      aria-pressed={active === undefined ? undefined : active}
      className={`${padClasses} rounded ${colorClasses} ${className || ''}`}
    >
      {children}
    </button>
  );
}
