import React, { useEffect, useState } from 'react';

export interface ImagePreviewProps {
  blobUrl?: string;
  blob?: Blob;
  alt?: string;
}

export const ImagePreview: React.FC<ImagePreviewProps> = ({
  blobUrl,
  blob,
  alt = 'Preview'
}) => {
  const [internalUrl, setInternalUrl] = useState<string | null>(null);

  useEffect(() => {
    if (blobUrl) {
      setInternalUrl(blobUrl);
    } else if (blob) {
      const url = URL.createObjectURL(blob);
      setInternalUrl(url);
      return () => URL.revokeObjectURL(url);
    } else {
      setInternalUrl(null);
    }
  }, [blob, blobUrl]);

  if (!internalUrl) {
    return (
      <div className="flex items-center justify-center h-full text-gray-400">
        No image available
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center h-full bg-gray-50 p-4">
      <img
        src={internalUrl}
        alt={alt}
        className="max-w-full max-h-[600px] object-contain shadow-sm rounded"
      />
    </div>
  );
};