<!-- source-hash: 69e19d1dd3c34ac5624e382237522c62 -->
React client component that fetches and renders Reddit post embeds with support for video, gallery, and image previews, using a centralized social embed cache for data fetching.

## Key Components

### `RedditEmbedClient`
Main export. Accepts a Reddit post `url` and optional `maxWidth`, fetches post data via `socialCache.fetchWithHierarchy`, and renders a styled embed card.

### `RedditPost` Interface
Typed shape for the Reddit API JSON response, covering text, author, vote counts, preview images, hosted video, gallery data, and media metadata.

### `getMediaContent(): MediaItem[]`
Internal helper that extracts media from a post in priority order:
1. **Reddit-hosted video** (`v.redd.it` DASH streams) with poster image generation
2. **Gallery posts** (`gallery_data` + `media_metadata`)
3. **Single preview images** (best resolution ≤ 1200 px wide)

Skips all media extraction when the API signals a removed or deleted post (`selftext === '[removed]'`, `author === '[deleted]'`, etc.).

### Inline SVG Icons
`MessageCircleIcon`, `ExternalLinkIcon`, `ArrowUpIcon`, `ClockIcon`, `UserIcon`, `RedditIcon` — self-contained SVGs to avoid external icon dependencies.

### `RedditProfilePic`
Minimal avatar component rendering a Reddit-orange circle with `u/` text instead of fetching user avatars.

## Usage Example

```typescript
import { RedditEmbedClient } from './reddit-embed-client';

// In a React component / MDX page:
<RedditEmbedClient
  url="https://www.reddit.com/r/nextjs/comments/abc123/some_post"
  maxWidth={600}
/>
```

The component is a `"use client"` boundary — server components should use dynamic import or a server-side wrapper. It renders a skeleton loader while fetching, a fallback error card (with a direct Reddit link) on failure, and the full post card with `MediaCarousel` on success.

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