import { PreviewTrigger } from "@hashti/react";
// Or compound subcomponents:
// PreviewTrigger.Root, PreviewTrigger.Trigger, PreviewTrigger.Content, PreviewTrigger.Arrow

<PreviewTrigger delay={400} closeDelay={300}>
  <PreviewTrigger.Trigger>
    <Link href="/team/ramin">@ramin</Link>
  </PreviewTrigger.Trigger>
  <PreviewTrigger.Content>{/* Rich user profile preview card */}</PreviewTrigger.Content>
</PreviewTrigger>

import { PreviewTrigger, Avatar, Button, Badge } from "@hashti/react";

export function UserProfilePreviewExample() {
  return (
    <p className="text-sm">
      This proposal was authored by{" "}
      <PreviewTrigger delay={300} closeDelay={200}>
        <PreviewTrigger.Trigger>
          <span className="font-semibold underline decoration-dotted cursor-pointer text-[var(--focus)]">
            @ramin
          </span>
        </PreviewTrigger.Trigger>
        <PreviewTrigger.Content className="w-80 p-4">
          <div className="flex gap-3">
            <Avatar size="lg" initials="RR" presence="online" />
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between">
                <h4 className="font-semibold text-sm">Ramin Rezaei</h4>
                <Badge kind="success">Core</Badge>
              </div>
              <p className="text-xs text-[var(--text-muted)] mt-0.5">@ramin · Isfahan, IR</p>
              <p className="text-xs text-[var(--text)] mt-2">
                Staff Designer & Systems Engineer. Architecting Hashti Design System.
              </p>
              <div className="flex items-center gap-4 mt-3 text-xs text-[var(--text-muted)]">
                <span>
                  <strong>48</strong> Components
                </span>
                <span>
                  <strong>8</strong> Themes
                </span>
              </div>
            </div>
          </div>
        </PreviewTrigger.Content>
      </PreviewTrigger>{" "}
      for review by the design systems council.
    </p>
  );
}

import { PreviewTrigger, Icon } from "@hashti/react";

export function RichLinkPreviewExample() {
  return (
    <div className="text-sm space-y-2">
      <p>
        Learn more about Persian arch geometry in our{" "}
        <PreviewTrigger placement="top" delay={400}>
          <PreviewTrigger.Trigger>
            <span className="text-[var(--focus)] underline cursor-pointer">
              Spatial Philosophy Guide
            </span>
          </PreviewTrigger.Trigger>
          <PreviewTrigger.Content className="w-72 p-3 space-y-2">
            <div className="flex items-center gap-2 text-xs font-semibold text-[var(--accent-turquoise)]">
              <Icon name="info" size={14} />
              <span>Hashti Architecture</span>
            </div>
            <p className="text-xs text-[var(--text)] leading-relaxed">
              Explore how the octagonal vestibule acts as a sensory pause between bustling public
              streets and private tranquil courtyards.
            </p>
            <span className="text-[10px] text-[var(--text-muted)] font-mono">
              docs/foundations/spacing-geometry.mdx
            </span>
          </PreviewTrigger.Content>
        </PreviewTrigger>
        .
      </p>
    </div>
  );
}

<PreviewTrigger delay={500} closeDelay={400} placement="bottom">
  <PreviewTrigger.Trigger>
    <button className="text-sm font-medium">Inspect Metric</button>
  </PreviewTrigger.Trigger>
  <PreviewTrigger.Content className="p-3">
    <p className="text-xs">Hover over this card without losing focus.</p>
  </PreviewTrigger.Content>
</PreviewTrigger>