import React, { ImgHTMLAttributes } from 'react';

interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  className?: string;
  fallbackSrc?: string;
  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
  fill?: boolean;
  fullWidth?: boolean;
  fullHeight?: boolean;
}

export function Image({ src, alt, width, height, className = '', fallbackSrc, objectFit, fill, fullWidth, fullHeight, ...props }: ImageProps) {
  const classes = [
    objectFit ? `object-${objectFit}` : '',
    fill ? 'absolute inset-0 w-full h-full' : '',
    fullWidth ? 'w-full' : '',
    fullHeight ? 'h-full' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={src}
      alt={alt}
      width={width}
      height={height}
      className={classes}
      onError={(e) => {
        if (fallbackSrc) {
          (e.target as HTMLImageElement).src = fallbackSrc;
        }
      }}
      {...props}
    />
  );
}