"use client";
import { useEffect, useState } from "react";
import style from "./MessengerIcon.module.css";
import classNames from "classnames";
import Image from "next/image";
import { useNavigation } from "@core/app/hooks/goto";
import { useSessionStore } from "@core/Store/Sesion.Store";

export default function MessengerIcon(): React.ReactElement {
    const SessionInfo = useSessionStore();
    const { goTo } = useNavigation();
    const [buttonClassNames] = useState(
        classNames(style.buttonMessenger, style.buttonMessengerVisible)
    );
    const [hidden, setHidden] = useState(true);

    useEffect(() => {
        if (!SessionInfo.loged) {
            setHidden(true);
            return;
        }
        setHidden(true);
    }, [SessionInfo.userId]);

    return (
        <>
            {!hidden && (
                <div
                    className={buttonClassNames}
                    onClick={() => {
                        goTo("/messenger");
                    }}
                >
                    <Image src={"/tx-messenger-icon.svg"} alt="messenger" width={64} height={69} />
                </div>
            )}
        </>
    );
}
