"use client";
import { FC, useState } from "react";
import SalaryForm from "@/components/salary/salary-form";
import { useQuery } from "@tanstack/react-query";
import getData from "@/utils/fetch";
import { Spinner } from "flowbite-react";

type props = {
    salaryId?: string
}
const SalaryEditContent: FC<props> = ({ salaryId }) => {

    const getSalaries = async () => {
        const {
            data,
        } = await getData(`/api/v1/salaries/${salaryId}`);
        return data;
    };

    const {
        data: salary,
        isLoading
    } = useQuery({
        queryKey: ["salaries", { salaryId }],
        queryFn: () => getSalaries(),
        retry: 0,
    });
    console.log(salary);
    return (
        <div>
            <div className="">
                {(isLoading) && (
                    <div className="relative">
                        <div className="grid fixed left-2/4 top-1/2 z-50">
                            <Spinner size="xl" color="purple" />
                        </div>
                    </div>
                )}
                {salary && (
                    <SalaryForm salary={salary} mode="edit" />
                )}
            </div>
        </div>
    );
};

export default SalaryEditContent;