"use client";
import VariantForm from "@/components/admin/variants/variantForm";
import { Loader } from "lucide-react";
import { useEffect, useState, useCallback } from "react";

const Page = ({ params }: { params: { variantsId: string } }) => {
  const [variant, setVariant] = useState<ProductVariant | null>(null);

  const fetchVariantDetails = useCallback(async () => {
    const response = await fetch(`/api/admin/variants/${params.variantsId}`);
    const data = await response.json();

    console.log(data);
    if (response.status === 200 || response.status === 201) {
      setVariant(data.mssg as ProductVariant);
    } else {
      console.error("Failed to fetch variant details");
    }
  }, [params.variantsId]);

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

  return !variant ? <Loader /> : <VariantForm initialData={variant} />;
};

export default Page;