// src/routes/traffic/DropCell.tsx
import { useDroppable } from "@dnd-kit/core";

export function DropCell({ day, hour, children }: any) {
    const { setNodeRef, isOver } = useDroppable({
        id: `${day.toDateString()}-${hour}`,
        data: { day, hour },
    });

    return (
        <div
            ref={setNodeRef}
            className={`relative border h-20 p-1 ${
                isOver ? "bg-blue-400" : ""
            } overflow-visible`}
            style={{
                maxWidth: 340, // your allotted width
                alignContent: "flex-start",
            }}
        >
            {children}
        </div>
    );
}
