"use client";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Spinner } from "flowbite-react";
import Link from "next/link";
import { FC, useId } from "react";
import { HiArrowLeft } from "react-icons/hi";
import Button from "../Button";
import PageHeader from "../PageHeder";
import { TSmacResellerSchema } from "../forms/schema/mac-reseller";
import MacResellerBasicView from "./basic-view";

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

  const getMacReseller = async () => {
    const { data } = await axios.get(`/api/mac-resellers/${macResellerId}`);
    return data?.data as TSmacResellerSchema;
  };

  const { data: macReseller, isLoading } = useQuery({
    queryKey: [randomId],
    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 && (
        <>
          <PageHeader>
            <div className="flex justify-between !p-0">
              <h2 className="text-xl font-semibold">Mac Reseller Details</h2>
              <Button>
                <Link href={"/clients"}>
                  <div className="flex">
                    <HiArrowLeft className={"mr-2 mt-1"} />
                    <span> Back</span>
                  </div>
                </Link>
              </Button>
            </div>
          </PageHeader>
          <MacResellerBasicView macReseller={macReseller} />
        </>
      )}
    </>
  );
};

export default MacResellerView;