<!-- source-hash: 9c2fe27cb025dab5e630418cc7b208a0 -->
Reusable React component for displaying and managing highlight video previews with support for manual upload, AI-generated badges, and duration display.

## Key Components

### `HighlightVideoPreviewProps`
| Prop | Type | Description |
|------|------|-------------|
| `highlightVideoUrl` | `string \| null` | URL of the highlight video |
| `highlightVideoThumbnail` | `string \| null` | Thumbnail image URL |
| `highlightVideoDurationMs` | `number \| null` | Duration in milliseconds |
| `highlightVideoSource` | `'manual' \| 'ai_generated' \| null` | Video origin, shows AI badge if `ai_generated` |
| `onUpload` | `(file: File) => Promise<string>` | File upload handler |
| `onDelete` | `() => Promise<void>` | Delete handler |
| `renderVideoPreview` | `(props) => ReactNode` | Render prop for custom video player |
| `uploadProgressComponent` | `ReactNode` | Optional upload progress UI |

### `HighlightVideoPreview`
Main exported component rendering the label row, badges, upload button, and delegating video display to the `renderVideoPreview` render prop.

## Usage Example

```typescript
import { HighlightVideoPreview } from './highlight-video-preview';

<HighlightVideoPreview
  highlightVideoUrl="https://cdn.example.com/video.mp4"
  highlightVideoThumbnail="https://cdn.example.com/thumb.jpg"
  highlightVideoDurationMs={125000}
  highlightVideoSource="ai_generated"
  onUpload={async (file) => {
    const url = await uploadToStorage(file);
    return url;
  }}
  onDelete={async () => {
    await deleteVideo();
  }}
  renderVideoPreview={({ videoUrl, thumbnailUrl, onDelete }) => (
    <VideoPlayer src={videoUrl} poster={thumbnailUrl} onDelete={onDelete} />
  )}
/>
```

> **Note:** This component is designed for both `CustomerInterview` and `ProductRelease` entities, providing a consistent highlight video UI across the platform. The `renderVideoPreview` render prop keeps the video player implementation decoupled.