/**
 * Button component with tooltip support for disabled state
 * Wraps Button component to show tooltip when disabled
 */
import { ReactNode } from 'react';
import Button, { ButtonProps } from './Button';
import { Tooltip } from '../tooltip/Tooltip';

interface ButtonWithTooltipProps extends ButtonProps {
  tooltip?: string;
  tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
}

export default function ButtonWithTooltip({
  tooltip,
  tooltipPlacement = 'top',
  disabled,
  children,
  ...buttonProps
}: ButtonWithTooltipProps) {
  // If button is disabled and has a tooltip, wrap it
  if (disabled && tooltip) {
    return (
      <Tooltip text={tooltip} placement={tooltipPlacement}>
        <span className="inline-block">
          <Button {...buttonProps} disabled={disabled}>
            {children}
          </Button>
        </span>
      </Tooltip>
    );
  }

  // Otherwise, render button normally
  return (
    <Button {...buttonProps} disabled={disabled}>
      {children}
    </Button>
  );
}

