infoalloggi-monorepo/apps/infoalloggi/src/components/InformationBubble.tsx

import { ExternalLink } from "lucide-react";
import Link from "next/link";
import type { ReactNode } from "react";
import {
	HybridTooltip,
	HybridTooltipContent,
	HybridTooltipTrigger,
} from "~/components/custom_ui/HybridTooltip";
import { IconMatrix, type IconType } from "~/components/IconComponents";
import { TooltipProvider } from "~/components/ui/tooltip";
import { cn } from "~/lib/utils";

/*
<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
						className={cn("size-6 text-indigo-500", iconClassName)}
						type={icon}
					/>
				</HybridTooltipTrigger>

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

export default InformationBubble;