"use client";

import Link from "next/link";
import { Info } from "lucide-react";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";

export type TooltipAdvancedProps = {
  label: string;
  content: string;
  linkLabel?: string;
  linkHref?: string;
};

export function TooltipAdvanced({
  label,
  content,
  linkLabel,
  linkHref
}: TooltipAdvancedProps) {
  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="ghost" size="icon" aria-label={label}>
            <Info className="h-4 w-4" />
          </Button>
        </TooltipTrigger>
        <TooltipContent side="top" align="center" className="max-w-xs">
          <div className="space-y-2">
            <p className="text-xs text-muted-foreground">{content}</p>
            {linkHref && linkLabel ? (
              <Link href={linkHref} className="text-xs font-semibold text-primary">
                {linkLabel}
              </Link>
            ) : null}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}