"use client";

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Spinner } from "flowbite-react";
import { FC, useId } from "react";
import ResellerForm from "./reseller-form";

type props = {
  resellerId: string | null;
};
const ResellerEdit: FC<props> = ({ resellerId }) => {
  const random_id = useId();
  const getReseller = async () => {
    const { data } = await axios.get(`/api/resellers/${resellerId}`);
    return data?.data;
  };
  const { data: reseller, isLoading } = useQuery({
    queryKey: [random_id],
    queryFn: getReseller,
    retry: 0,
  });
  return (
    <>
      {isLoading && (
        <div className="flex justify-around">
          <Spinner
            aria-label="Center-aligned spinner flex justify-center"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {reseller && <ResellerForm reseller={reseller} isEdit={true} />}
    </>
  );
};

export default ResellerEdit;