import { useDroppable } from "@dnd-kit/core";
import { Box, useTheme } from "@mui/material";
import { ReactNode } from "react";
import { OrderStatusEnum } from "../../components/Order";

type DroppableContainerProps = {
    id: OrderStatusEnum;
    children: ReactNode;
};

export function DroppableContainer({ id, children }: DroppableContainerProps) {
    const { setNodeRef } = useDroppable({ id });
    const theme = useTheme();

    return (
        <Box
            ref={setNodeRef}
            sx={{
                flex: 1,
                minHeight: 400,
                backgroundColor: theme.palette.background.default,
                border: `1px solid ${theme.palette.divider}`,
                borderRadius: 2,
                p: 2,
                transition: "background-color 0.3s, border-color 0.3s",
            }}
        >
            {children}
        </Box>
    );
}
