import React, { useState } from 'react'
import { NewWindow } from 'react-window-open'

const Example = () => {
    const [isOpen, setIsOpen] = useState(false)
    const [counter, setCounter] = useState(0)

    return (
        <>
            <button onClick={() => setIsOpen(!isOpen)}>{!isOpen ? 'Open' : 'Close'}</button>

            {isOpen && <NewWindow onClose={() => setIsOpen(false)}>
                <p>This text is displayed in a new window. 👀</p>
                <p>And all the states are shared ! 👌</p>
                <p>Counter in the new window : {counter}</p>
                <button onClick={() => setCounter(counter+1)}>Increment from the new window</button>
            </NewWindow>}

            <p>Counter on the original page : {counter}</p>
            <button onClick={() => setCounter(counter+1)}>Increment</button>
        </>
    )
}

export default Example