"use client"

/**
 * HoverCard — richer, persistent hover surface for content too large or
 * interactive for a `Tooltip` (avatars, link previews, user cards, glossary
 * entries).
 *
 * When to choose `HoverCard` vs `Tooltip` vs `Popover`:
 *  - **`Tooltip`** — short text label, no interaction, auto-dismiss on
 *    mouseout / blur. Pairs with `Tip` for icon-only buttons.
 *  - **`HoverCard`** — small interactive content (links, copy buttons,
 *    avatars) shown on intentional hover; closes when the pointer leaves.
 *    Not focusable / not announced by screen readers — pair with an
 *    accessible alternative for keyboard users (visit profile link, etc.).
 *  - **`Popover`** — keyboard- and screen-reader-accessible, opens on
 *    explicit click. Use this when the surface holds primary content.
 *
 * Accessibility (per Radix):
 *  - HoverCard is NOT exposed to screen readers — Radix intentionally
 *    treats it as a sighted-mouse-user affordance. The trigger MUST also
 *    convey its meaning through its own accessible name and behaviour
 *    (e.g. a focusable `<a>` that links to the same content).
 */

import * as React from "react"
import { HoverCard as HoverCardPrimitive } from "radix-ui"

import { cn } from "../../lib/utils"

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none duration-150 ease-out data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className,
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }