"use client"

import { Avatar, AvatarGroup } from "@/registry/ui/avatar/avatar"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/registry/ui/hover-card/hover-card"

export default function HoverCardBasic() {
  return (
    <p className="max-w-sm text-sm text-muted-foreground">
      Last night's aurora burst was relayed through{" "}
      <HoverCard>
        <HoverCardTrigger
          href="#kx-7"
          className="font-mono font-medium text-foreground"
        >
          KX-7
        </HoverCardTrigger>
        <HoverCardContent>
          <div className="flex items-center gap-3">
            <Avatar size="lg" fallback="KX" />
            <div className="min-w-0">
              <p className="font-display text-sm font-semibold leading-none tracking-tight">
                KX-7 — Svalbard
              </p>
              <p className="mt-1 text-xs text-muted-foreground">
                Polar uplink · 145.800 MHz · 24h coverage
              </p>
            </div>
          </div>
          <dl className="grid grid-cols-2 gap-2 text-xs">
            <div>
              <dt className="text-muted-foreground">Signal</dt>
              <dd className="font-mono font-medium">-97 dBm</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">Uptime</dt>
              <dd className="font-mono font-medium">99.2%</dd>
            </div>
          </dl>
          <div className="flex items-center justify-between border-t border-border pt-3">
            <span className="text-xs text-muted-foreground">Crew on shift</span>
            <AvatarGroup size="sm" overflow={2}>
              <Avatar size="sm" fallback="IN" />
              <Avatar size="sm" fallback="RS" />
              <Avatar size="sm" fallback="AK" />
            </AvatarGroup>
          </div>
        </HoverCardContent>
      </HoverCard>{" "}
      before the storm closed the northern corridor.
    </p>
  )
}
Draw

Examples
