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, TGroup> = {
    activeContainer: TContainer | null;
    activeItem: TItem | null;
    activeGroup: TGroup | null;
    renderContainer: (container: TContainer) => ReactNode;
    renderItem: (item: TItem) => ReactNode;
    renderGroup: (group: TGroup) => ReactNode;
};

const FunnelOverlay = <TContainer, TItem, TGroup>({
    activeContainer,
    activeItem,
    activeGroup,
    renderContainer,
    renderItem,
    renderGroup,
}: Props<TContainer, TItem, TGroup>) => {
    const renderOverlay = () => {
        if (activeItem) return renderItem(activeItem);
        if (activeContainer) return renderContainer(activeContainer);
        if (activeGroup) return renderGroup(activeGroup);
    };

    return (
        <DragOverlay dropAnimation={defaultDropAnimation}>
            <div className={styles.overlay}>{renderOverlay()}</div>
        </DragOverlay>
    );
};

export default FunnelOverlay;
