import * as React from 'react' // React n’a pas d’export par défaut en ESM
import { useEffect, useState } from 'react'

function Modal({isOpen, onStateChange}) {
	
	const [open, setOpen] = useState(isOpen)

	useEffect(() => {
		setOpen(isOpen)
	}, [isOpen] )

	const handleClickCloseModal = () => {
		setOpen(false)
	}

	// 🔔 Notifie le parent à chaque changement de `open`
  useEffect(() => {
		if (typeof onStateChange === "function") {
			onStateChange(open)
		}
	},[open])

	if(!open) return null

	return (
		<>
			{isOpen && 
				<div className='modal'>
					<div className='modal-content'>
						<div className='modal-text'>
							<span className='modal-btnClose' onClick={handleClickCloseModal} >x</span>
							<span>Employee Created!</span>
						</div>
						<a href='/employees' to="/employees">View Current Employees</a>
					</div>
				</div>
			}
		</>
	)
}

// export par défaut
export default Modal

// export nommé
export { Modal }