"use client";

import * as React from "react";
import { useDroppable } from "@dnd-kit/core";
import { kanbanCardDropId } from "./kanban-card-drop-utils";

export const KanbanCardDropShell = React.memo(function KanbanCardDropShell({
  stageId,
  dealId,
  children,
}: {
  stageId: string;
  dealId: string;
  children: React.ReactNode;
}) {
  const id = kanbanCardDropId(stageId, dealId);
  const { setNodeRef } = useDroppable({
    id,
    data: { type: "kanban-card-drop" as const, stageId, dealId },
  });
  return (
    <div
      ref={setNodeRef}
      className="w-full max-w-full box-border rounded-xl"
    >
      {children}
    </div>
  );
});