import { Flex, ScrollArea, Stack } from "@mantine/core";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";
import DealInfoView from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/DealInfoView/DealInfoView";
import ProductView from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/ProductView/ProductView";

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

    return (
        <Flex
            mah={"96vh"}
            mx={"md"}
            gap={"xs"}>
            <ScrollArea
                offsetScrollbars={"y"}
                flex={4}>
                <Stack>
                    {dealProductsList.dealProducts.map((dealProduct, index) => (
                        <ProductView
                            dealProduct={dealProduct}
                            key={index}
                        />
                    ))}
                </Stack>
            </ScrollArea>
            <DealInfoView />
        </Flex>
    );
};

export default FulfillmentBaseTabBody;
