"use client";

import Link from "next/link";
import { useState } from "react";

export function CursorTooltipLink({ href, tooltip, className, children }: { href: string; tooltip: string; className?: string; children: React.ReactNode }) {
  const [point, setPoint] = useState({ x: 0, y: 0, visible: false });

  return (
    <>
      <Link
        href={href}
        className={className}
        onPointerEnter={(event) => setPoint({ x: event.clientX, y: event.clientY, visible: true })}
        onPointerMove={(event) => setPoint({ x: event.clientX, y: event.clientY, visible: true })}
        onPointerLeave={() => setPoint((current) => ({ ...current, visible: false }))}
      >
        {children}
      </Link>
      {point.visible ? <span className="cursor-tooltip" style={{ left: point.x + 14, top: point.y + 14 }}>{tooltip}</span> : null}
    </>
  );
}