import { Flex, ScrollArea, Stack } from "@mantine/core";
import DealServicesTable from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/DealServicesTable/DealServicesTable";
import ProductsActions from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductsActions/ProductsActions";
import ProductView from "@/modules/dealModules/dealEditorTabs/FulfillmentBaseTab/components/ProductView/ProductView";
import { useFulfillmentBaseContext } from "../../contexts/FulfillmentBaseContext";

const FulfillmentBaseTabBody = () => {
    const { dealProductsList } = useFulfillmentBaseContext();

    return (
        <Flex
            p={"md"}
            gap={"xs"}>
            <ScrollArea
                offsetScrollbars={"y"}
                mah={"91vh"}>
                <Stack>
                    {dealProductsList.dealProducts.map((dealProduct, index) => (
                        <ProductView
                            dealProduct={dealProduct}
                            key={index}
                        />
                    ))}
                </Stack>
            </ScrollArea>
            <Stack>
                <DealServicesTable />
                <ProductsActions />
            </Stack>
        </Flex>
    );
};

export default FulfillmentBaseTabBody;