Hover card

"use client";

import { Avatar, Badge, HoverCard, HoverCardContent, HoverCardTrigger } from "@waveinno/ui";
import { ShieldCheck } from "lucide-react";

function Person() {
  return (
    <div className="flex gap-3">
      <Avatar name="Karim Ahmed" size="lg" status="online" />
      <div className="min-w-0">
        <p className="text-[14px] font-semibold text-text">Karim Ahmed</p>
        <p className="text-[12.5px] text-muted">Owner · Gulshan Parking Ltd</p>
        <p className="mt-2 text-[12.5px] leading-[18px] text-body">Runs 3 sites, 412 bays. On ParkingOS since March 2025.</p>
        <div className="mt-3 flex gap-1.5">
          <Badge tone="success">Pro</Badge>
          <Badge tone="info">
            <ShieldCheck className="size-3" /> Verified
          </Badge>
        </div>
      </div>
    </div>
  );
}

export default function HoverCardDemo() {
  return (
    <p className="text-[14px] leading-7 text-body">
      Approved by{" "}
      <HoverCard>
        <HoverCardTrigger asChild>
          <a href="#hover-card" className="font-semibold text-primary underline decoration-primary/30 underline-offset-4 hover:decoration-primary">
            @karim
          </a>
        </HoverCardTrigger>
        <HoverCardContent arrow>
          <Person />
        </HoverCardContent>
      </HoverCard>{" "}
      at Gate 2 for{" "}
      <HoverCard>
        <HoverCardTrigger asChild>
          <a href="#hover-card" className="font-mono font-semibold text-text underline decoration-border2 underline-offset-4">
            DHA-GA 12-3456
          </a>
        </HoverCardTrigger>
        <HoverCardContent variant="dark" arrow className="w-64">
          <p className="ov">Vehicle</p>
          <p className="mt-1 font-mono text-[15px] font-semibold text-text">DHA-GA 12-3456</p>
          <p className="mt-1 text-[12.5px] text-muted">Toyota Axio · white · monthly pass</p>
          <p className="mt-3 text-[12.5px] text-body">Inside since 08:42 · Level 1, Bay A</p>
        </HoverCardContent>
      </HoverCard>
      . Hover or focus the links.
    </p>
  );
}