import React from 'react';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';

export interface ActionButtonProps {
  icon: React.ComponentType<any>;
  onClick?: (e?: any) => void;
  onPointerDown?: () => void;
  onPointerUp?: () => void;
  type?: 'button' | 'submit';
  className?: string;
  [key: string]: any; // Allow any additional props to be passed through
}

export const ActionButton: React.FC<ActionButtonProps> = ({
  icon,
  onClick,
  onPointerDown,
  onPointerUp,
  type = 'button',
  className,
  iconClassName = 'm-0 w-4 h-4',
  ...restProps
}) => {
  // Filter out non-DOM props that might be passed by ContextMenuTrigger
  const { isOpen, ...buttonProps } = restProps;

  return (
    <Button
      type={type}
      onClick={onClick}
      onPointerDown={onPointerDown}
      onPointerUp={onPointerUp}
      variant={ButtonVariant.Tertiary}
      size={ButtonSize.Medium}
      shape={ButtonShape.Pill}
      icon={icon}
      iconClassName={iconClassName}
      className={twMerge(
        'bg-background-fog-thin hover:bg-white/2 active:bg-white/3',
        'p-2',
        'transition-colors duration-150',
        // Apply hover-like state when context menu is open
        isOpen && 'bg-white/2',
        className
      )}
      {...(buttonProps as any)}
    />
  );
};