<!-- source-hash: d7af9befa8736257f5fa1a7169b8bc9d -->
Reusable configuration section component for highlight video generation settings, providing duration selection and subtitle burning controls in a unified horizontal layout.

## Key Components

### `HighlightConfigSection`
A client-side React component used across `CustomerInterview` and `ProductRelease` entity workflows to configure highlight video output options.

### `HighlightConfigSectionProps`
| Prop | Type | Description |
|------|------|-------------|
| `targetDurationSeconds` | `number` | Current selected duration in seconds |
| `onTargetDurationChange` | `(seconds: number) => void` | Callback fired on duration change |
| `skipSubtitleBurning` | `boolean` | Whether subtitle burning is skipped |
| `onSkipSubtitleBurningChange` | `(skip: boolean) => void` | Callback fired on subtitle toggle |
| `disabled` | `boolean?` | Disables all controls (default: `false`) |
| `className` | `string?` | Additional CSS class override |

**Duration options:** 60s, 120s, 180s *(recommended)*, 240s, 300s

## Usage Example

```typescript
import { HighlightConfigSection } from './highlight-config-section';

function VideoEditor() {
  const [duration, setDuration] = useState(180);
  const [skipSubs, setSkipSubs] = useState(false);

  return (
    <HighlightConfigSection
      targetDurationSeconds={duration}
      onTargetDurationChange={setDuration}
      skipSubtitleBurning={skipSubs}
      onSkipSubtitleBurningChange={setSkipSubs}
      disabled={false}
    />
  );
}
```

> **Note:** Renders as a dark-themed panel (`bg-[#1a1a1a]`) with a `Select` dropdown for duration and a checkbox for subtitle burning, laid out horizontally via flexbox.