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

interface IProps {
  onClick?: () => void;
}

const ClickMe = forwardRef((props: IProps, ref: React.Ref<HTMLAnchorElement>) => {
  return (
    <a
      href="#/"
      onClick={(e: React.SyntheticEvent) => {
        e.preventDefault();
        props.onClick();
      }}
      ref={ref}
    >
      Click me!
    </a>
  );
});

export default (
  <div className="m-5">
    <Popover reference={<ClickMe />} className="w-100" placement="bottom-end">
      <PopoverBody className="p-0 my-2 popover-resources overflow-auto">
        {["test 1", "test 2", "test 3"].map(r => (
          <a
            href="#link"
            title="title"
            target="_blank"
            className="d-flex align-items-center text-decoration-none"
            key={r}
          >
            <div className="d-flex p-0 ml-3 mr-3">{r}</div>
          </a>
        ))}
      </PopoverBody>
    </Popover>
  </div>
);