"use client";

import { useState } from "react";
import { Plus } from "lucide-react";
import ExpenseModal from "./AddExpenseModal";
import { IconButtonWithTooltip } from "ikoncomponents";
import { ProductOfProject } from "@/app/utils/interface/productOfProject";

export default function AddExpenseButton({
  productIdentifier,
  productData,
  setProductData,
}: {
  productIdentifier: string;
  productData: ProductOfProject | undefined;
  setProductData: React.Dispatch<React.SetStateAction<ProductOfProject | undefined>>;
}) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);

  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <>
      <div className="flex flex-row items-center justify-end">
        <IconButtonWithTooltip
          tooltipContent="Add/Edit Expenses"
          onClick={handleOpenModal}
        >
          <Plus />
        </IconButtonWithTooltip>
      </div>

      <ExpenseModal
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        productIdentifier={productIdentifier}
        productData={productData}
        setProductData={setProductData}
      />
    </>
  );
}