import type { Media } from '../types';

export function MediaImage({
  media,
  eager = false,
  className = ''
}: {
  media?: Media;
  eager?: boolean;
  className?: string;
}) {
  if (!media?.url) {
    return null;
  }

  return (
    // Media origins are CMS-managed and intentionally unrestricted, so a native image is used here.
    // eslint-disable-next-line @next/next/no-img-element
    <img
      className={`block h-auto w-full object-cover ${className}`}
      src={media.url}
      alt={media.alt}
      width={media.width}
      height={media.height}
      loading={eager ? 'eager' : 'lazy'}
      fetchPriority={eager ? 'high' : 'auto'}
    />
  );
}