import { useContext } from "react";
import { PremiumContext } from "./premium";

export const Premium = ({ size = 20, tooltip = true }: any) => {
  const { setOpen } = useContext(PremiumContext);
  return (
    <span
      className="relative group transition-all duration-100 max-w-max cursor-pointer inline-block"
      onClick={() => setOpen(true)}
    >
      <svg
        width={`${size}px`}
        height={`${size}px`}
        viewBox="0 0 512 512"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g
          id="Page-1"
          stroke="none"
          strokeWidth="1"
          fill="none"
          fillRule="evenodd"
        >
          <g
            id="Group"
            transform="translate(-0.000000, 0.000000)"
            fillRule="nonzero"
          >
            <g transform="translate(0.000000, 121.494000)" id="Path">
              <path
                d="M15.2940005,128.843 L-3.17441246e-15,135.327 C-3.17441246e-15,139.203 1.4900005,143.05 4.3990005,145.948 L245.446001,386.152 C248.259001,388.956 253.091001,390.493 255.928001,390.506083 C258.810001,390.519 263.739001,389.002 266.601001,386.149 L507.607001,145.794 C510.508001,142.9 512.002001,139.063 512.002001,135.194 L498.704001,128.843 C491.289001,128.843 422.419001,128.843 338.740001,128.843 L249.010001,157.809 L173.121001,128.843 C94.4060005,128.843 28.8440005,128.843 15.2940005,128.843 L15.2940005,128.843 Z"
                fill="#FFB739"
              ></path>
              <path
                d="M511.996001,135.195 C511.996001,139.06 510.508001,142.896 507.601001,145.792 L266.597001,386.147 C263.761001,388.983 258.876001,390.502 256.000001,390.502 L256.000001,155.55 L338.739001,128.843 L498.703001,128.843 L511.996001,135.195 Z"
                fill="#FF9441"
              ></path>
              <polygon
                fill="#FF9441"
                points="173.119001 128.843 256.000001 390.502 338.738001 128.843"
              ></polygon>
              <polygon
                fill="#FF7149"
                points="338.738001 128.843 256.000001 390.502 256.000001 128.843"
              ></polygon>
              <path
                d="M509.487001,126.868 L429.260001,6.665 C428.150001,5.003 426.720001,3.591 425.073001,2.501 L417.801001,5.993 L269.879001,6.915 L256.000001,-1.42108547e-14 L244.784001,7.071 L97.1950005,7.991 L86.8960005,2.516 C85.2610005,3.603 83.8360005,5.01 82.7280005,6.673 L2.5070005,127.027 C0.818000503,129.561 5.02683724e-07,132.452 5.02683724e-07,135.327 C29.0610005,135.319 474.466001,135.202 512.000001,135.192 C512.000001,132.309 511.182001,129.408 509.487001,126.868 L509.487001,126.868 Z"
                fill="#FFD17E"
              ></path>
              <path
                d="M511.996091,135.195 C493.399001,135.195 374.624001,135.235 256.000001,135.265 L256.000001,2.84217094e-14 L269.883001,6.911 L417.802001,5.992 L425.073001,2.496 C426.721001,3.595 428.149001,5.003 429.258001,6.661 L509.490001,126.864 C511.187001,129.412 512.006001,132.308 511.996091,135.195 Z"
                fill="#FFB739"
              ></path>
              <path
                d="M95.1930005,-2.84217094e-14 C92.1970005,-2.84217094e-14 89.3230005,0.901 86.8990005,2.514 L175.755001,135.281 L175.765001,135.281 L255.995001,-2.84217094e-14 L95.1930005,-2.84217094e-14 Z"
                fill="#FFB739"
              ></path>
              <path
                d="M336.264001,135.24 L425.070001,2.499 C422.651001,0.896 419.786001,0.001 416.799001,0.001 L255.995001,0.001 L336.200001,135.24 L336.264001,135.24 L336.264001,135.24 Z"
                fill="#FF9441"
              ></path>
            </g>
            <path
              d="M166.424001,361.319 C141.349001,361.319 120.948001,340.919 120.948001,315.844 C120.948001,307.56 114.232001,300.844 105.948001,300.844 C97.6640005,300.844 90.9480005,307.56 90.9480005,315.844 C90.9480005,340.793 70.6710005,361.319 45.4730005,361.319 C37.1890005,361.319 30.4730005,368.035 30.4730005,376.319 C30.4730005,384.603 37.1890005,391.319 45.4730005,391.319 C70.5480005,391.319 90.9480005,411.719 90.9480005,436.794 C90.9480005,445.078 97.6640005,451.794 105.948001,451.794 C114.232001,451.794 120.948001,445.078 120.948001,436.794 C120.948001,411.847 141.223001,391.319 166.424001,391.319 C174.708001,391.319 181.424001,384.603 181.424001,376.319 C181.424001,368.035 174.708001,361.319 166.424001,361.319 Z"
              id="Path"
              fill="#FFD17E"
            ></path>
            <path
              d="M396.329001,60.475 C371.254001,60.475 350.854001,40.075 350.854001,15 C350.854001,6.716 344.138001,0 335.854001,0 C327.570001,0 320.854001,6.716 320.854001,15 C320.854001,40.075 300.455001,60.475 275.379001,60.475 C267.095001,60.475 260.379001,67.191 260.379001,75.475 C260.379001,83.759 267.095001,90.475 275.379001,90.475 C300.454001,90.475 320.854001,110.875 320.854001,135.95 C320.854001,144.234 327.570001,150.95 335.854001,150.95 C344.138001,150.95 350.854001,144.234 350.854001,135.95 C350.854001,110.875 371.253001,90.475 396.329001,90.475 C404.613001,90.475 411.329001,83.759 411.329001,75.475 C411.329001,67.191 404.613001,60.475 396.329001,60.475 Z"
              id="Path"
              fill="#FFB739"
            ></path>
          </g>
        </g>
      </svg>
      {tooltip && (
        <div className="pointer-events-none absolute left-0 -top-1 transform -translate-x-full whitespace-nowrap pr-2 group-hover:opacity-100 opacity-0 transition-all duration-100">
          <div className="bg-[#000] bg-opacity-70 backdrop-blur-sm rounded-md py-1 px-2 text-md text-white font-medium border-2 border-[#000]">
            Log to your account to get access
          </div>
        </div>
      )}
    </span>
  );
};