"use client";

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

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

export default MacResellerEdit;