"use client";

import { FiInfo } from "react-icons/fi";
import { useState } from "react";

type ForWhat = "regenerate-key" | "packages";

interface CustomTooltipProps {
  className?: string;
  forWhat: ForWhat;
}

const accordingText: Record<ForWhat, string> = {
  "regenerate-key":
    "Regenerate your license key if you believe it has been exposed or shared. Your current key will be deactivated and replaced with a new one. You'll need to use the new key to activate the extension.",
  packages:
    "After your purchase, you'll receive a link to download the extension and access to the image upload page.",
};

export default function CustomTooltip({
  className = "",
  forWhat,
}: CustomTooltipProps) {
  const [open, setOpen] = useState(false);

  return (
    <div
      className={`relative inline-flex ${className}`}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
      onClick={() => setOpen((prev) => !prev)} // Mobile support
    >
      <button
        type="button"
        aria-label="More information"
        className="flex h-6 w-6 items-center justify-center rounded-full text-purple-400 transition-all duration-200 hover:bg-purple-50 hover:text-purple-600"
      >
        <FiInfo size={16} />
      </button>

      <div
        className={`absolute bottom-full left-1/2 z-50 mb-3 w-72 -translate-x-1/2 transition-all duration-200 ${
          open
            ? "pointer-events-auto translate-y-0 opacity-100"
            : "pointer-events-none translate-y-2 opacity-0"
        }`}
      >
        <div className="relative rounded-xl border border-purple-500/20 bg-slate-900 px-4 py-3 text-xs leading-5 text-slate-100 shadow-[0_8px_24px_-4px_rgba(124,58,237,0.35)]">
          {accordingText[forWhat]}

          {/* Arrow */}
          <div className="absolute left-1/2 top-full h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-purple-500/20 bg-slate-900" />
        </div>
      </div>
    </div>
  );
}