import { useEchoModelProviders } from '@merit-systems/echo-react-sdk';
import { experimental_generateImage as generateImage } from 'ai';

function ImageGenerator() {
  const { openai } = useEchoModelProviders();
  const [imageUrl, setImageUrl] = useState(null);
  const [isGenerating, setIsGenerating] = useState(false);
  
  const handleGenerate = async () => {
    setIsGenerating(true);
    
    const result = await generateImage({
      model: openai.image('dall-e-3'),
      prompt: 'A futuristic cityscape at sunset',
      size: '1024x1024',
    });

    if (result.image) {
      setImageUrl(`data:image/png;base64,${result.image.base64}`);
    }
    
    setIsGenerating(false);
  };

  return (
    <div>
      <button onClick={handleGenerate} disabled={isGenerating}>
        {isGenerating ? 'Generating...' : 'Generate Image'}
      </button>
      
      {imageUrl && (
        <img src={imageUrl} alt="Generated image" className="mt-4 rounded-lg" />
      )}
    </div>
  );
}