import { useClickOutside } from "@xtablo/shared/hooks/useClickOutside";
import React from "react";

interface ClickOutsideProps {
  children: React.ReactNode;
  onClickOutside: () => void;
  className?: string;
  disabled?: boolean;
}

/**
 * Component that wraps children and detects clicks outside
 * @param children - The content to wrap
 * @param onClickOutside - Function to call when clicking outside
 * @param className - Optional className for the wrapper
 * @param disabled - Disable click outside detection
 */
export const ClickOutside: React.FC<ClickOutsideProps> = ({
  children,
  onClickOutside,
  className,
  disabled = false,
}) => {
  const ref = useClickOutside<HTMLDivElement>(
    disabled
      ? () => {
          // Do nothing
        }
      : onClickOutside
  );

  return (
    <div ref={ref} className={className}>
      {children}
    </div>
  );
};
