"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";
import { useUser } from "@/hooks/useUser";

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

  const [loading, setLoading] = useState(false);
  const { createEmptyUser } = useUser();

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

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

export default NewUser;
