<!-- source-hash: 0b18246ba972b704769b5c9382e327c6 -->
Renders a styled card for displaying a user comment, supporting both vendor-context (showing the commenter's identity) and profile-context (showing the associated vendor) views with optional delete functionality.

## Key Components

### `CommentCard`
The primary exported component accepting a `CommentCardProps` object.

**Props:**

| Prop | Type | Description |
|------|------|-------------|
| `comment` | `object` | Comment data including content, metadata, and optional vendor/user info |
| `onViewProduct` | `(vendorSlug: string) => void` | Callback when vendor button is clicked |
| `onDeleteComment` | `(commentId: string) => void` | Callback when delete button is clicked |
| `showVendorInfo` | `boolean` | Whether to display vendor information (default: `true`) |
| `compact` | `boolean` | Reduces content area height (default: `false`) |
| `context` | `'profile' \| 'vendor'` | Controls header layout — vendor button or user summary |

### Delete Authorization Logic (`canUserDeleteComment`)
Context-aware check: in `profile` context, relies on `comment.canDelete`; in `vendor` context, compares `currentUser.id` against `comment.user.id`.

## Usage Example

```typescript
<CommentCard
  comment={{
    id: "abc123",
    content: "Excellent ticketing integration with our existing stack.",
    title: "Great RMM Tool",
    type: "pro",
    importance: "Critical",
    createdAt: "2024-11-01T10:00:00Z",
    vendor: { id: 1, title: "NinjaRMM", slug: "ninjarmm", logo: "/logos/ninja.png" },
    canDelete: true,
  }}
  context="profile"
  onViewProduct={(slug) => router.push(`/vendors/${slug}`)}
  onDeleteComment={(id) => handleDelete(id)}
  compact={false}
/>
```