import type { ReactNode } from "react";
import HoverTooltip from "./HoverTooltip";

export type DisabledActionTooltipProps = {
  reason?: ReactNode;
  children: ReactNode;
  className?: string;
};

export default function DisabledActionTooltip({ reason, children, className = "" }: DisabledActionTooltipProps) {
  if (!reason) return <>{children}</>;
  return (
    <HoverTooltip
      content={reason}
      tone="danger"
      className={`disabled-action-tooltip ${className}`.trim()}
      triggerTabIndex={0}>
      {children}
    </HoverTooltip>
  );
}