import Image from "next/image";
import { ImgHTMLAttributes } from "react";

interface CustomImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
  src: string;
  alt: string;
  fill?: boolean;
  sizes?: string;
  priority?: boolean;
}

export const CustomImage = ({ src, alt, fill, sizes, priority, className, style, ...props }: CustomImageProps) => {
  // Check if src is a data URL (base64)
  const isDataUrl = src.startsWith('data:');
  
  if (isDataUrl) {
    // For data URLs, use regular img tag
    return (
      <img
        src={src}
        alt={alt}
        className={className}
        style={{
          objectFit: 'cover',
          width: fill ? '100%' : undefined,
          height: fill ? '100%' : undefined,
          ...style
        }}
        {...props}
      />
    );
  }
  
  // For regular URLs, use Next.js Image component
  return (
    <Image
      src={src}
      alt={alt}
      fill={fill}
      sizes={sizes}
      priority={priority}
      className={className}
    />
  );
};