"use client";

import { useDroppable } from "@dnd-kit/core";
import { cn } from "@/lib/utils";

interface DroppableCanvasProps {
  id: string;
  children: React.ReactNode;
  className?: string;
  backgroundElement?: React.ReactNode;
  onBackgroundClick?: () => void;
}

export function DroppableCanvas({
  id,
  children,
  className,
  backgroundElement,
  onBackgroundClick,
}: DroppableCanvasProps) {
  const { isOver, setNodeRef } = useDroppable({
    id,
  });

  return (
    <div
      ref={setNodeRef}
      className={cn(
        "relative w-full h-full overflow-hidden",
        "transition-colors duration-200",
        isOver && "bg-blue-50/50",
        className
      )}
      onPointerDown={(e) => {
        // Since DraggableElement stops propagation, any pointer down here is a background click
        onBackgroundClick?.();
      }}
    >
      {/* Background element (e.g., concentric circles, grid) */}
      {backgroundElement && (
        <div className="absolute inset-0 pointer-events-none">
          {backgroundElement}
        </div>
      )}

      {/* Draggable elements */}
      <div className="relative w-full h-full">
        {children}
      </div>
    </div>
  );
}