import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import MoreIcon from "../../navbar/moreInfo";
import RewardSlider from "../../navbar/rewardSlider";
import { UserProfile } from "../../../types/notifications";
import RewardIcon from "../rewardIcon";
import TooltipBottom from "../../../utils/helpers/tooltipBottom";
function RewardsButton({ user }: { user: UserProfile }) {
  const two = [{ href: "/account-settings", label: "About" }];

  const one = [];

  const titles = [{ href: "/sign-out", label: "General" }];

  return (
    <Menu>
      {({ open }) => (
        <>
          <div className="relative flex flex-col items-center justify-center">
            <Menu.Button className="">
              <TooltipBottom
                text={<RewardIcon />}
                tip={"Notifications"}
                opened={open}
                special={true}
              />
            </Menu.Button>
          </div>
          <Menu.Items
            as="div"
            className="absolute z-20 h-[30rem] w-[19.5rem] -translate-x-[17.813rem] xl:w-[22rem] "
          >
            <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"
            >
              <div className=" flex  flex-col  shadow-2xl focus:outline-none">
                <Menu.Item disabled={true}>
                  <div className="flex h-full rounded-t-md border-b-2 border-b-[#161617] bg-[#1e1e20] px-3 pt-3 pb-3 text-sm shadow-2xl">
                    <svg
                      width="100%"
                      height="100%"
                      version="1.1"
                      viewBox="0 0 20 20"
                      x="0px"
                      y="0px"
                      className="w-6"
                      fill="white"
                    >
                      <g>
                        <path
                          fill-rule="evenodd"
                          d="M18 7v9a2 2 0 01-2 2H4a2 2 0 01-2-2V7l8-5 8 5zM4 9.943V16h12V9.943l-4.256 3.04a3 3 0 01-3.488 0L4 9.943zm6-5.584L4.465 7.818l4.954 3.538a1 1 0 001.162 0l4.954-3.538L10 4.358z"
                          clip-rule="evenodd"
                        ></path>
                      </g>
                    </svg>
                    <span className="w-full rounded-t-md  bg-[#1E1E20]  text-center text-[#deded3]">
                      Notifications
                    </span>
                    <svg
                      width="100%"
                      height="100%"
                      version="1.1"
                      viewBox="0 0 20 20"
                      x="0px"
                      y="0px"
                      className=" w-6 cursor-pointer"
                      fill="white"
                      role="button"
                    >
                      <g>
                        <path d="M10 8a2 2 0 100 4 2 2 0 000-4z"></path>
                        <path
                          fill-rule="evenodd"
                          d="M9 2h2a2.01 2.01 0 001.235 1.855l.53.22a2.01 2.01 0 002.185-.439l1.414 1.414a2.01 2.01 0 00-.439 2.185l.22.53A2.01 2.01 0 0018 9v2a2.01 2.01 0 00-1.855 1.235l-.22.53a2.01 2.01 0 00.44 2.185l-1.415 1.414a2.01 2.01 0 00-2.184-.439l-.531.22A2.01 2.01 0 0011 18H9a2.01 2.01 0 00-1.235-1.854l-.53-.22a2.009 2.009 0 00-2.185.438L3.636 14.95a2.009 2.009 0 00.438-2.184l-.22-.531A2.01 2.01 0 002 11V9c.809 0 1.545-.487 1.854-1.235l.22-.53a2.009 2.009 0 00-.438-2.185L5.05 3.636a2.01 2.01 0 002.185.438l.53-.22A2.01 2.01 0 009 2zm-4 8l1.464 3.536L10 15l3.535-1.464L15 10l-1.465-3.536L10 5 6.464 6.464 5 10z"
                          clip-rule="evenodd"
                        ></path>
                      </g>
                    </svg>
                    <svg
                      width="100%"
                      height="100%"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      className="ml-2 w-6 cursor-pointer"
                      role="button"
                    >
                      <path d="M8.5 10 4 5.5 5.5 4 10 8.5 14.5 4 16 5.5 11.5 10l4.5 4.5-1.5 1.5-4.5-4.5L5.5 16 4 14.5 8.5 10z"></path>
                    </svg>
                  </div>
                </Menu.Item>
                <Menu.Item disabled={true}>
                  <div className=" flex flex-col justify-center rounded-b-md  bg-[#1E1E20] ">
                    <div className="flex justify-start">
                      {" "}
                      <RewardSlider user={user} />
                    </div>
                  </div>
                </Menu.Item>
              </div>
            </Transition>
          </Menu.Items>
        </>
      )}
    </Menu>
  );
}
export default RewardsButton;