import { Menu, Transition } from "@headlessui/react";
import React, { Fragment } from "react";
import { SmallDots } from "../SmallMore";
import classNames from "../../../utils/helpers/className";

const MoreReport = () => {
  return (
    <div className="z-30 2xs:flex 2xs:items-center 2xs:justify-between">
      <div className=" flex items-center justify-between sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:justify-start">
        <Menu as="div" className="relative ml-3 inline-block text-left">
          <div>
            <Menu.Button className="-my-2 flex items-center  bg-transparent  text-gray-400 hover:text-gray-600 ">
              <span className="sr-only">Open options</span>
              <div className="h-full w-full">
                <SmallDots />
              </div>
              {/* <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" /> */}
            </Menu.Button>
          </div>

          <Transition
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items className="absolute right-0 -top-5 mt-2  w-56 origin-top-right -translate-y-[100%] rounded-md  bg-[#1f1f23] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
              <div className="py-1">
                <Menu.Item>
                  {({ active }) => (
                    <button
                      type="button"
                      className={classNames(
                        active ? "bg-[#2d2d34] text-white" : "text-white",
                        "flex w-full justify-between px-4 py-2 text-sm"
                      )}
                    >
                      <div className="flex items-start justify-start whitespace-nowrap">
                        <div className="h-5 w-5">
                          <svg
                            width="100%"
                            height="100%"
                            version="1.1"
                            viewBox="0 0 20 20"
                            x="0px"
                            y="0px"
                            className="fill-white"
                          >
                            <g>
                              <path d="M9 6h2v3H9V6zM9 11a1 1 0 112 0 1 1 0 01-2 0z"></path>
                              <path
                                fill-rule="evenodd"
                                d="M7 15l3 3 3-3h2a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2h2zm3 .172L7.828 13H5V5h10v8h-2.828L10 15.172z"
                                clip-rule="evenodd"
                              ></path>
                            </g>
                          </svg>
                        </div>
                        <span className="flex flex-grow items-start pl-3">
                          Report Channel
                        </span>
                      </div>
                    </button>
                  )}
                </Menu.Item>
                <Menu.Item>
                  {({ active }) => (
                    <button
                      type="button"
                      className={classNames(
                        active ? "bg-[#2d2d34] text-white" : "text-white",
                        "flex w-full justify-between px-4 py-2 text-sm"
                      )}
                    >
                      <div className="flex items-start justify-start whitespace-nowrap">
                        <div className="h-5 w-5">
                          <svg
                            width="100%"
                            height="100%"
                            version="1.1"
                            viewBox="0 0 20 20"
                            x="0px"
                            y="0px"
                            className=" fill-white"
                          >
                            <g>
                              <path
                                fill-rule="evenodd"
                                d="M16.5 18l1.5-1.5-2.876-2.876a9.99 9.99 0 001.051-1.191L18 10l-1.825-2.433a9.992 9.992 0 00-2.855-2.575 35.993 35.993 0 01-.232-.14 6 6 0 00-6.175 0 35.993 35.993 0 01-.35.211L3.5 2 2 3.5 16.5 18zm-2.79-5.79a8 8 0 00.865-.977L15.5 10l-.924-1.233a7.996 7.996 0 00-2.281-2.058 37.22 37.22 0 01-.24-.144 4 4 0 00-4.034-.044l1.53 1.53a2 2 0 012.397 2.397l1.762 1.762z"
                                clip-rule="evenodd"
                              ></path>
                              <path d="M11.35 15.85l-1.883-1.883a3.996 3.996 0 01-1.522-.532 38.552 38.552 0 00-.239-.144 7.994 7.994 0 01-2.28-2.058L4.5 10l.428-.571L3.5 8 2 10l1.825 2.433a9.992 9.992 0 002.855 2.575c.077.045.155.092.233.14a6 6 0 004.437.702z"></path>
                            </g>
                          </svg>
                        </div>
                        <span className=" flex flex-grow items-start pl-3">
                          Not Interested
                        </span>
                      </div>
                    </button>
                  )}
                </Menu.Item>
                {/* <Menu.Item>
                                {({ active }) => (
                                  <button
                                    type="button"
                                    className={classNames(
                                      active
                                        ? "bg-gray-100 text-gray-900"
                                        : "text-gray-700",
                                      "flex w-full justify-between px-4 py-2 text-sm"
                                    )}
                                  >
                                    <span>Archive</span>
                                  </button>
                                )}
                              </Menu.Item> */}
              </div>
            </Menu.Items>
          </Transition>
        </Menu>
      </div>
    </div>
  );
};

export default MoreReport;