<!-- source-hash: 2dc22952dfcc6e283cfc3b6d4d636ade -->
Renders a styled comment card that adapts its header to the surface: it leads with the vendor a comment is about on a user profile, or with the commenter everywhere else. Delete is a caller-supplied rule.

## Key Components

### `CommentCard` (default export)

The comment tile: one card for every comment surface, with the header lead, the body length and deletability all supplied as props.

**Props (`CommentCardProps`):**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `comment` | `object` | — | Comment data including content, author, vendor, and metadata |
| `leadWith` | `'vendor' \| 'commenter'` | `'commenter'` | Which header the tile leads with: the vendor the comment is about (profile page) or the person who wrote it |
| `onViewProduct` | `(slug: string) => void` | — | Callback when vendor button is clicked |
| `onDeleteComment` | `(id: string) => void` | — | Callback when delete is triggered |
| `showVendorInfo` | `boolean` | `true` | Toggles vendor info display |
| `compact` | `boolean` | `false` | Reduces content area height |

**Internal logic:**

- `canUserDeleteComment()` — Deletability is the CALLER's rule: an explicit `comment.canDelete` wins, and the default is "your own comment" (`currentUser.id === comment.user.id`). No per-surface branch.
- `formatActivityTime()` — Delegates to `formatRelativeTime` utility for human-readable timestamps

## Usage Example

```typescript
<CommentCard
  comment={{
    id: "abc123",
    content: "Solid RMM tool for small MSPs.",
    title: "Great value",
    createdAt: "2025-06-01T12:00:00Z",
    user: {
      id: "user-42",
      name: "Jane Smith",
      profilePicture: null,
    },
    canDelete: true,
  }}
  onDeleteComment={(id) => console.log("Delete", id)}
/>
```

**Source:** [`comment-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/comment-card.tsx)