import {useEffect, useState} from "react";

export default function Dropdown(props) {

  const [ open, setOpen ] = useState(false);

  useEffect( () => {
    document.addEventListener('keyup', (e) => {
      if (e.key === "Escape") {
        setOpen(false);
      }
    });
  }, [open]);

  return (<div onClick={() => setOpen(!open)} {...props}>
    {props.children[0]}
    {open && props.children[1]}
  </div>);
}