import { FC } from "react";
import { useDealStatusHistoryTableColumns } from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/columns";
import useStatusHistoryList from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/useStatusHistoryList";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { DealSchema } from "@/lib/client";

type Props = {
    value: DealSchema;
};

const DealStatusHistoryTab: FC<Props> = ({ value }) => {
    const { history } = useStatusHistoryList({ dealId: value.id });
    const columns = useDealStatusHistoryTableColumns();

    return (
        <BaseTable
            records={history}
            columns={columns}
            groups={undefined}
            withTableBorder
            style={{
                margin: "var(--mantine-spacing-md)",
            }}
            verticalSpacing={"md"}
        />
    );
};

export default DealStatusHistoryTab;
