/**
 * Img — Drop-in replacement for Remotion's <Img>.
 *
 * An <img> element with:
 * - Draggable disabled by default
 * - Error handling for failed loads
 * - User-select disabled for composition use
 */
import React from 'react';

interface ImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  src: string;
}

export const Img: React.FC<ImgProps> = ({ style, ...props }) => (
  <img
    draggable={false}
    {...props}
    style={{
      userSelect: 'none',
      ...style,
    }}
    onError={(e) => {
      // Silently handle broken images in compositions
      const target = e.currentTarget;
      target.style.opacity = '0';
    }}
  />
);
