export default function Header({children}){
    const [isAuthorized, setIsAuthorized] = useState(true)
    const [menuVisible, setMenuVisible] = useState(false);
    const [modalOpen, setModalOpen] = useState(false)
    const [formData, setFormData] = useState({
        email: '',
        password: ''
    })
    const [errors, setErrors] = useState({
        email: '',
        password: ''
    })


    const toggleMenu = () => {
        setMenuVisible(!menuVisible)
    }

    const handleExit = () => {
        setIsAuthorized(false)
    }

    // Проверяем, находится ли клик вне user контейнера и выпадающего меню
    const handleClickOutside = (e) => {
        if (
            menuVisible &&
            !e.target.closest(`.${styles.userContainer}`) &&
            !e.target.closest(`.${styles.dropdownMenu}`)
        ) {
            setMenuVisible(false);
        }
    };

    useEffect(() => {
        document.addEventListener('click', handleClickOutside);
        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    }, [menuVisible]);

    const openCloseModal = () => {
        setModalOpen(!modalOpen)
    }

    const handleChange = event => {
        const { name, value } = event.target;
        setFormData(prevState => ({
            ...prevState,
            [name]: value,
        }));
    };

    return(
        <div className={styles.header}>
            <div className={styles.gridColumn}>
                <img style={{maxHeight: "68px"}} src={goMindLogo} alt="GoMindLogo"/>
            </div>
            <div className={styles.gridColumn}>
                <h1>{children}</h1>
            </div>
            <div className={styles.gridColumn}>
                <div className={styles.vrtLine}/>
            </div>
            <div className={styles.userContainer}>
                {!isAuthorized &&
                    <div className={styles.authContainer} onClick={openCloseModal}>
                        <h3 className="noSelect">Авторизация</h3>
                    </div>
                }
                {isAuthorized &&
                    <>
                    <div className={styles.profileContainer} onClick={toggleMenu}>
                        <div className={styles.avatar}></div>
                        <h3 className="noSelect">Иван Иванов</h3>
                    </div>
                    {menuVisible && (
                        <div className={styles.dropdownMenu}>
                            <ul>
                                <li onClick={handleExit}>Выход</li>
                            </ul>
                        </div>
                    )}
                    </>
                }
            </div>
            {modalOpen &&
                <div className={styles.modalOverlay} onClick={openCloseModal}>
                    <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
                        <h1>Авторизация</h1>
                        <form className={styles.authForm}>
                            <label>Email
                                <input type="text" value={formData.email} placeholder="example@mail.com" onChange={handleChange}/>
                                { errors.password === '' && <span>Некорректный email</span>}
                            </label>
                            <label>Пароль
                                <input type="text" value={formData.email} placeholder="12345" onChange={handleChange}/>
                                <span>Некорректный пароль</span>
                            </label>
                            <button>Войти</button>

                        </form>
                    </div>
                </div>
            }
        </div>
    )
}
почему то не могу ввести значение в форму