import React from "react";

export function PreviewCard({ content, delay = 300, className = "", children }) {
  const [open, setOpen] = React.useState(false);
  const timer = React.useRef(null);
  return (
    <span className={className} style={{ position: "relative", display: "inline-flex" }} data-slot="preview-card"
      onMouseEnter={() => { timer.current = setTimeout(() => setOpen(true), delay); }}
      onMouseLeave={() => { clearTimeout(timer.current); setOpen(false); }}>
      {children}
      {open ? (
        <div className="o-popup o-previewcard" data-slot="preview-card-content" style={{ position: "absolute", zIndex: 50, top: "calc(100% + 4px)", insetInlineStart: "50%", translate: "-50% 0" }}>{content}</div>
      ) : null}
    </span>
  );
}
export const HoverCard = PreviewCard;
