"use client";
import { useEffect, useState, useCallback } from "react";
import Loader from "@/components/admin/custom ui/Loader";
import ProductForm from "@/components/admin/products/ProductForm";

const ProductDetails = ({ params }: { params: { productsId: string } }) => {
  const [loading, setLoading] = useState(true);
  const [ProductDetails, setProductDetails] = useState<ProductType | null>(
    null
  );

  const getProductDetails = useCallback(async () => {
    try {
      const res = await fetch(`/api/admin/products/${params.productsId}`, {
        method: "GET",
      });
      const data = await res.json();
      setProductDetails(data.msg);
      setLoading(false);
    } catch (err) {
      console.log("[productsId_GET]", err);
    }
  }, [params.productsId]);

  useEffect(() => {
    getProductDetails();
  }, [getProductDetails]);

  return loading ? <Loader /> : <ProductForm initialData={ProductDetails} />;
};

export default ProductDetails;