import React, { createRef, useEffect } from "react";
import { Popover, PopoverBody } from "../../";

export default () => {
  const actionsRef = createRef<{ close: () => void }>();

  return (
    <div className="m-5">
      <Popover
        actions={actionsRef}
        reference={<span>Click me!</span>}
        className="w-100"
        placement="bottom-end"
      >
        <PopoverBody className="p-0 my-2 popover-resources overflow-auto">
          Text text
          <button onClick={() => actionsRef.current.close()}>Click me to close</button>
        </PopoverBody>
      </Popover>
    </div>
  );
};