import { cn } from "~/lib/utils";
import {
  HybridTooltip,
  HybridTooltipContent,
  HybridTooltipTrigger,
} from "~/components/custom_ui/HybridTooltip";
import { TooltipProvider } from "~/components/ui/tooltip";
import { IconMatrix, type IconType } from "~/components/IconComponents";
import Link from "next/link";
import { ExternalLink } from "lucide-react";
import type { ReactNode } from "react";
/*
<TouchProvider>
    <div className="relative">
        <Button onClick={() => console.log("click")}>Azione </Button>
        <InformationBubble href="/prezzi" txt="Informazioni sui prezzi" />
    </div>
</TouchProvider>
*/

type ChildrenBubbleProps = {
  children: ReactNode;
  href?: undefined;
  txt?: undefined;
  target?: undefined;
};

type LinkBubbleProps = {
  children?: undefined;
  href: string;
  txt: string;
  target?: "_self" | "_blank" | "_parent" | "_top";
};
type InformationBubbleProps = {
  className?: string;
  iconClassName?: string;
  icon?: IconType;
  side?: "top" | "bottom" | "left" | "right";
} & (ChildrenBubbleProps | LinkBubbleProps);

const InformationBubble = ({
  className,
  icon = "circle-help",
  iconClassName,
  side,
  children,
  href,
  txt,
  target,
}: InformationBubbleProps) => {
  return (
    <TooltipProvider delayDuration={0}>
      <HybridTooltip>
        <HybridTooltipTrigger
          className={cn(
            `absolute -top-2 -right-2 flex size-6 items-center justify-center rounded-full bg-white`,
            className,
          )}
        >
          <IconMatrix
            type={icon}
            className={cn("size-6 text-indigo-500", iconClassName)}
          />
        </HybridTooltipTrigger>

        <HybridTooltipContent
          side={side}
          className="border-border -mb-1.5 bg-white shadow-sm [&>span>svg]:invisible"
        >
          {href ? (
            <Link
              href={href}
              target={target}
              className="flex items-center justify-center text-sm text-blue-500 underline-offset-2 hover:underline"
            >
              <ExternalLink className="mr-1 size-4" />
              <p>{txt}</p>
            </Link>
          ) : (
            <>{children}</>
          )}
        </HybridTooltipContent>
      </HybridTooltip>
    </TooltipProvider>
  );
};

export default InformationBubble;