import { useHovercards } from "~/hooks/use-hovercards";
import { Badge } from "./ui/Primitives";

/** Floating preview for issue, user, team and commit references; mount once near the app root. */
export function HovercardLayer() {
  const state = useHovercards();
  if (!state) return null;
  const { card } = state;
  return (
    <div
      role="tooltip"
      data-hovercard-popup
      style={{ top: state.top, left: state.left }}
      className="animate-rise absolute z-50 w-80 space-y-1.5 rounded-lg border border-gray-800 bg-gray-950 p-3 text-sm shadow-2xl shadow-black/60"
    >
      <p className="text-xs text-gray-500">{card.subtitle}</p>
      <p className="font-medium text-gray-100">{card.title}</p>
      {card.state && <Badge tone={card.state === "open" ? "green" : "purple"}>{card.state}</Badge>}
      {card.body && <p className="line-clamp-3 text-xs text-gray-400">{card.body}</p>}
    </div>
  );
}