import { UserIcon } from "@/components/icons/userIcon";
import { Button } from "@nextui-org/react";
import { useRef, useState } from "react";
import { useOnClickOutside } from "usehooks-ts";

export default function OnClickOutSide() {
    const ref = useRef(null);
    const [edit, setEdit] = useState(false);
    const [inputValue] = useState('User Name');

    const handleOnClick = () => {
        setEdit(true);
    }
    const handleOnClickOutside = () => {
        setEdit(false);
    }

    useOnClickOutside(ref, handleOnClickOutside);

    return (
        <>
            <Button
                color="danger"
                variant="bordered"
                isIconOnly={!edit}
                ref={ref}
                onClick={handleOnClick}
            >
                <UserIcon />
                {edit && inputValue}
            </Button>
        </>
    );
};