import { FC, useState } from "react";
import { BsThreeDots } from "react-icons/bs";
type props = {
  color?: string;
  children?: any;
  onClick?: () => void;
  className?: string;
  buttonType?: any;
  options: { [key: string]: number | string }[];
};
const DropdownAction: FC<props> = ({}) => {
  const [isOpen, setOpen] = useState(false);
  return (
    <>
      <div className="relative">
        <button
          id="dropdownUsersButton"
          data-dropdown-toggle="dropdownUsers"
          data-dropdown-placement="bottom"
          className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
          type="button"
          onClick={() => (isOpen ? setOpen(false) : setOpen(true))}
        >
          {<BsThreeDots />}
        </button>
        <div
          id="dropdownUsers"
          className={`z-10  bg-white absolute rounded-lg shadow w-60 dark:bg-gray-700 ${
            !isOpen ? "hidden" : ""
          }`}
        >
          <ul
            className="h-48 py-2 overflow-y-auto text-gray-700 dark:text-gray-200"
            aria-labelledby="dropdownUsersButton"
          >
            <li>
              <a
                href="#"
                className="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
              >
                Jese Leos
              </a>
            </li>
          </ul>
        </div>
      </div>
    </>
  );
};

export default DropdownAction;