import React, { ReactNode } from "react";
import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core";
import styles from "@/components/dnd/FunnelDnd/FunnelDnd.module.css";

type Props<TContainer, TItem> = {
    activeContainer: TContainer | null;
    activeItem: TItem | null;
    renderContainer: (container: TContainer) => ReactNode;
    renderItem: (item: TItem) => ReactNode;
};

const FunnelOverlay = <TContainer, TItem>({
    activeContainer,
    activeItem,
    renderContainer,
    renderItem,
}: Props<TContainer, TItem>) => {
    return (
        <DragOverlay dropAnimation={defaultDropAnimation}>
            <div className={styles.overlay}>
                {activeItem
                    ? renderItem(activeItem)
                    : activeContainer
                      ? renderContainer(activeContainer)
                      : null}
            </div>
        </DragOverlay>
    );
};

export default FunnelOverlay;
