<!-- source-hash: 19b6fb4bf578261808d64ed0dbbafcce -->
Reusable React component for managing a media gallery with upload, display, drag-and-drop reordering, and deletion capabilities. Designed for use across events, product releases, and any content requiring media gallery management.

## Key Components

### `MediaItem` Interface
Describes a single media entry with the following fields:

| Field | Type | Description |
|-------|------|-------------|
| `id` | `string \| number` | Optional identifier for existing items |
| `media_type` | `'image' \| 'video' \| 'screenshot' \| 'demo'` | Type classification |
| `media_url` | `string` | URL of the media asset |
| `title` | `string` | Optional display title |
| `description` | `string` | Optional description |
| `display_order` | `number` | Optional sort order |
| `_uploading` | `boolean` | Internal upload state flag |

### `MediaGalleryManager` Component
Primary export. Renders upload zone, media grid, drag-and-drop controls, and delete actions.

**Props:**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `media` | `MediaItem[]` | — | Current media items array |
| `onChange` | `(media: MediaItem[]) => void` | — | Called on any mutation |
| `onUpload` | `(file, mediaType) => Promise<string>` | — | Handles file upload, returns URL |
| `isUploading` | `boolean` | `false` | Disables controls during upload |
| `showInModal` | `boolean` | `false` | Reserved for modal rendering |
| `modalTitle` | `string` | `'Media Gallery'` | Modal heading text |
| `className` | `string` | `''` | Additional CSS classes |

## Usage Example

```typescript
import { MediaGalleryManager, MediaItem } from './media-gallery-manager';

const [media, setMedia] = useState<MediaItem[]>([]);
const [uploading, setUploading] = useState(false);

async function handleUpload(file: File, mediaType: 'image' | 'video'): Promise<string> {
  setUploading(true);
  const formData = new FormData();
  formData.append('file', file);
  const res = await fetch('/api/upload', { method: 'POST', body: formData });
  const { url } = await res.json();
  setUploading(false);
  return url;
}

<MediaGalleryManager
  media={media}
  onChange={setMedia}
  onUpload={handleUpload}
  isUploading={uploading}
/>
```

> **Note:** Accepted file types are `image/*` and `video/*` with a recommended maximum of 50MB. On upload, images map to `screenshot` and videos to `demo` media types.