<!-- source-hash: 61d27934627ce1b9a3b2c8e253f66d56 -->
A React component for uploading hero/cover images with drag-and-drop functionality, file validation, and customizable upload handling. Provides both authenticated and deferred upload modes.

## Key Components

- **HeroImageUploader** - Main component with file validation (JPEG/PNG/WebP/GIF, 5MB max)
- **HeroImageUploaderProps** - Interface defining component configuration options
- **File validation** - Client-side type and size checking with toast notifications
- **Upload modes** - Standard upload, deferred upload (base64 preview), or custom handlers
- **Image preview** - Shows uploaded image with hover overlay for replace/remove actions

## Usage Example

```typescript
import { HeroImageUploader } from './hero-image-uploader';

// Basic usage with standard upload
<HeroImageUploader
  imageUrl={currentImage}
  onChange={(url) => setCurrentImage(url)}
  uploadEndpoint="/api/upload"
  height={400}
  objectFit="cover"
/>

// Deferred upload mode (returns base64 preview)
<HeroImageUploader
  imageUrl={previewImage}
  onChange={(url) => setPreviewImage(url)}
  uploadEndpoint="/api/upload"
  deferUpload={true}
/>

// Custom upload handler for authenticated uploads
<HeroImageUploader
  imageUrl={heroImage}
  onChange={setHeroImage}
  uploadEndpoint="/api/upload"
  onUpload={async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    const response = await authenticatedFetch('/api/upload', {
      method: 'POST',
      body: formData
    });
    return response.url;
  }}
  onDelete={async () => {
    await authenticatedFetch(`/api/images/${imageId}`, {
      method: 'DELETE'
    });
  }}
/>
```