"use client";

import { use } from "react";
import {
  useCustomersInfiniteQuery,
  useGetCustomersDetails,
} from "@/hooks/queries/useCustomerQueries";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import CreateCustomer from "@/components/forms/customers/CreateCustomer";
import Loading from "@/app/loading";

const EditCustomer = ({ params }: { params: Promise<{ id: string }> }) => {
  const { id } = use(params);
  const { isLoading, data, isError } = useGetCustomersDetails(id);
  const breadcrumbItems = [
    { name: "Dashboard", href: "/" },
    { name: "Customers", href: "/customers" },
    { name: "Edit Customer", href: `/customers/edit/${id}` },
  ];
  if (isLoading) return <Loading />;
  if (isError) return <div>Error</div>;
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      <CreateCustomer editMode defaultValues={data.data} id={id} />
    </>
  );
};

export default EditCustomer;
