"use client";

import ExpenseMainDataTable from "./expenseMainDataTable";
import { useEffect, useState } from "react";
import { ProductOfProject } from "@/app/utils/interface/productOfProject";

export default function ExpenseTab({
  productData,
}: {
  productData: ProductOfProject | undefined;
}) {
  const [localProductData, setLocalProductData] = useState(productData);

  // The parent loads the product asynchronously; keep local state in sync when
  // the prop arrives/changes (otherwise the tab keeps the initial undefined value).
  useEffect(() => {
    setLocalProductData(productData);
  }, [productData]);

  return (
    <>
      <ExpenseMainDataTable
        productData={localProductData}
        setProductData={setLocalProductData}
      />
    </>
  );
}