"use client";

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Spinner } from "flowbite-react";
import { FC, useId } from "react";
import { TSclientSchema } from "../forms/schema/client";
import ClientForm from "./client-form";

type props = {
  clientId: string | null;
};
const ClientEdit: FC<props> = ({ clientId }) => {
  const randomId = useId();

  const getUser = async () => {
    const { data } = await axios.get(`/api/clients/${clientId}`);
    return data?.data as TSclientSchema;
  };

  const { data: client, isLoading } = useQuery({
    queryKey: [randomId],
    queryFn: getUser,
    retry: 0,
  });

  return (
    <>
      {isLoading && (
        <div className="flex justify-around">
          <Spinner
            aria-label="Center-aligned spinner flex justify-center"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {client && <ClientForm client={client} isEdit={true} />}
    </>
  );
};

export default ClientEdit;