<!-- source-hash: ae08388ce3ea318c2f9f7e816b509f3b -->
A React dropdown component for selecting resource media types with visual icons, supporting common file formats and content types used in the Flamingo platform.

## Key Components

- **`ResourceMediaType`** - Type union defining supported media types (video, images, documents, guides, etc.)
- **`MediaTypeOption`** - Interface for dropdown options with value, label, and Lucide icon
- **`mediaTypeOptions`** - Static array of predefined media type configurations
- **`MediaTypeSelector`** - Main component providing a styled Select dropdown with icons

## Key Features

- **Icon Integration**: Each media type displays with appropriate Lucide React icons
- **Force Re-render Logic**: Uses key-based re-rendering to ensure Select component updates properly
- **Comprehensive Types**: Supports 9 media types including videos, images (PNG/JPG/SVG), documents, PDFs, archives, guides, and checklists
- **Customizable**: Accepts placeholder text, CSS classes, and disabled state

## Usage Example

```typescript
import { MediaTypeSelector, ResourceMediaType } from './media-type-selector'

function ResourceForm() {
  const [mediaType, setMediaType] = useState<ResourceMediaType>()
  
  return (
    <MediaTypeSelector
      value={mediaType}
      onValueChange={setMediaType}
      placeholder="Choose file type"
      className="w-full"
    />
  )
}
```

The component automatically displays the appropriate icon (Video, Image, FileText, etc.) next to each option and handles controlled state updates through the `onValueChange` callback.