import React, { FC, useMemo } from "react";
import { Box } from "@mantine/core";
import DealCard from "@/app/deals/components/DealCard/DealCard";
import { DealSchema } from "@/client";
import { SortableItem } from "@/components/SortableDnd/SortableItem";

type Props = {
    deal: DealSchema;
};

const DealContainer: FC<Props> = ({ deal }) => {
    const dealBody = useMemo(() => <DealCard deal={deal} />, [deal]);

    return (
        <Box>
            <SortableItem
                dragHandleStyle={{ cursor: "pointer" }}
                id={deal.id}>
                {dealBody}
            </SortableItem>
        </Box>
    );
};

export default DealContainer;
