typescript
import { usePromptStore } from '../core/models/store';
import { Select } from './ui/Select';
import { Button } from './ui/Button';
import { KI_MODELS, OPTIMIZATION_FRAMEWORKS } from '../core/models/optimizationConfig';
import { generateOptimizedPrompt } from '../core/engine/optimizer';
import { Sparkles } from 'lucide-react';

export const OptimizationControls = () => {
    const { targetKI, framework, mode, originalPrompt, isProcessing, setTargetKI, setFramework, setMode, setOptimizedPrompt, setIsProcessing } = usePromptStore();
    
    const selectedFramework = OPTIMIZATION_FRAMEWORKS.find(f => f.name === framework);
    const availableModes = selectedFramework?.modes || [];
    
    const handleOptimize = () => {
        setIsProcessing(true);
        // Simulate API call delay
        setTimeout(() => {
            setOptimizedPrompt(generateOptimizedPrompt(originalPrompt, targetKI, framework, mode));
            setIsProcessing(false);
        }, 500);
    };

    return (
        <div className="flex flex-col gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
            <Select 
                label="Ziel-KI" 
                value={targetKI} 
                onChange={(e) => setTargetKI(e.target.value as any)}
            >
                {KI_MODELS.map(ki => (
                    <option key={ki} value={ki}>{ki}</option>
                ))}
            </Select>
            
            <Select 
                label="Framework" 
                value={framework} 
                onChange={(e) => setFramework(e.target.value as any)}
            >
                {OPTIMIZATION_FRAMEWORKS.map(fw => (
                    <option key={fw.name} value={fw.name}>{fw.name}</option>
                ))}
            </Select>
            
            <Select 
                label="Modus" 
                value={mode} 
                onChange={(e) => setMode(e.target.value as any)}
            >
                {availableModes.map(m => (
                    <option key={m} value={m}>{m}</option>
                ))}
            </Select>
            
            <Button 
                onClick={handleOptimize} 
                disabled={!originalPrompt.trim() || isProcessing}
                className="w-full"
            >
                <Sparkles className="w-4 h-4 mr-2" />
                {isProcessing ? 'Optimiere...' : 'Prompt Optimieren'}
            </Button>
        </div>
    );
};

</html>