"use client";

import React, { useState } from "react";
import { useTerm } from "@/hooks/useTerm";

import Loader from "@/components/web/Loader/loader";
import Button from "@/components/ui/Button/button";
import { useRouter } from "next/navigation";

/**
 *
 * @type {React.FC <{
 *    children?: React.ReactNode;
 *    className?: string;
 *    fontSize?: number;
 *    color?: string;
 *    getCategory: Function;
 * }>}
 * @returns
 */
const NewCategory = (props) => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const { createEmptyCategory } = useTerm();

  const getCategoryData = (data) => {
    if (props.getCategory && typeof props.getCategory === "function")
      props.getCategory(data);
  };

  return (
    <Button
      className={props.className}
      disabled={loading}
      style={{
        fontSize: `${props.fontSize || 16}px`,
        color: props.color || "#fff",
      }}
      onClick={async () => {
        setLoading(true);
        await createEmptyCategory((result) => {
          getCategoryData(result);
          router.push(`/dashboard/categories/${result._id}`);
        });
        setLoading(false);
      }}>
      {loading && (
        <Loader
          width={props.fontSize || 16}
          color={props.color || "#fff"}
        />
      )}
      {props.children}
    </Button>
  );
};

export default NewCategory;
