import React, { ReactNode } from "react";
import { useDroppable } from "@dnd-kit/core";
import {
    SortableContext,
    verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { Stack } from "@mantine/core";
import { BaseDraggable } from "@/components/dnd/types/types";

type Props<TItem> = {
    id: string;
    items: TItem[];
    renderItem: (item: TItem) => ReactNode;
    children?: ReactNode;
};

const FunnelColumn = <TItem extends BaseDraggable>({
    id,
    items,
    renderItem,
    children,
}: Props<TItem>) => {
    const { setNodeRef } = useDroppable({ id });

    return (
        <>
            {children}
            <SortableContext
                id={id}
                items={items}
                strategy={verticalListSortingStrategy}>
                <Stack
                    gap="xs"
                    ref={setNodeRef}>
                    {items.map(renderItem)}
                </Stack>
            </SortableContext>
        </>
    );
};

export default FunnelColumn;