<!-- source-hash: 13f9305f5b11a7a8a688986630bbf7d1 -->
Pure presentation component for displaying customer interview data in two density variants (`default` and `sm`), with no embedded click logic — navigation is handled entirely by the caller via `href`.

## Key Components

### `CustomerInterviewCard`
Main card component rendering interview metadata, thumbnail, video indicator, and author/MSP attribution. Accepts an `href` prop for navigation and delegates all routing concerns to the caller.

### `CustomerInterviewCardSkeleton`
Animated loading placeholder that mirrors the layout of `CustomerInterviewCard` for both size variants, preventing layout shift during data fetching.

### `CustomerInterviewCardProps`
```typescript
interface CustomerInterviewCardProps {
  interview: CustomerInterview   // Core interview data
  href: string                   // Resolved detail URL (caller-provided)
  target?: '_blank'              // Opens in new tab when set
  rel?: 'noopener noreferrer'
  placeholderUrl?: string | null // Fallback OG image when featured_image is absent
  size?: 'default' | 'sm'       // 'sm' = compact horizontal (chat-inline)
  className?: string
}
```

## Usage Example

```typescript
// Default card — standalone page listing
<CustomerInterviewCard
  interview={interviewData}
  href={`/interviews/${interviewData.slug}`}
  placeholderUrl="/assets/interview-placeholder.jpg"
/>

// Compact variant — inline within chat/AI responses
<CustomerInterviewCard
  interview={interviewData}
  href={`/interviews/${interviewData.slug}`}
  target="_blank"
  rel="noopener noreferrer"
  size="sm"
/>

// Skeleton while fetching
<CustomerInterviewCardSkeleton size="sm" />
```

## Size Variants

| Variant | Layout | Use Case |
|---------|--------|----------|
| `default` | Vertical card with 1200×630 aspect image, summary, and author row | Grid/list pages |
| `sm` | Compact horizontal row with thumbnail + text column | Chat-inline embeds (Mingo AI / Fae) |