"use client";

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

import Loader from "@/components/web/Loader/loader";
import Button from "@/components/ui/Button/button";

/**
 *
 * @type {React.FC <{
 *    children?: React.ReactNode;
 *    className?: string;
 *    fontSize?: number;
 *    color?: string;
 *    getTag: Function;
 * }>}
 * @returns
 */
const NewTag = (props) => {
  const router = useRouter();

  const [loading, setLoading] = useState(false);
  const { createEmptyTag } = useTerm();

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

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

export default NewTag;
