AgilityPic should support gallery image items

[Mosnar]

We should support supplying gallery images to AgilityPic. For example:

export interface GalleryFieldImage {
  mediaID: number;
  fileName: string;
  url: string;
  size: number;
  modifiedOn: string;
  metaData: {
    pixelHeight: string;
    pixelWidth: string;
  };
}

export type AgilityImageType = ImageField | GalleryFieldImage;

const isImageField = (image: AgilityImageType): image is ImageField => {
  return 'label' in image;
};

const isGalleryFieldImage = (image: AgilityImageType): image is GalleryFieldImage => {
  return 'mediaID' in image;
};

const normalizeImage = (image: AgilityImageType) => {
  if (isImageField(image)) {
    return {
      url: image.url,
      width: image.width,
      height: image.height,
      label: image.label
    };
  } else {
    return {
      url: image.url,
      width: parseInt(image.metaData.pixelWidth),
      height: parseInt(image.metaData.pixelHeight),
      label: image.fileName
    };
  }
};

export interface AgilityPicProps {
  image: AgilityImageType; // Changed from ImageField
  fallbackWidth?: number;
  alt?: string;
  sources?: AgilityImageSourceProps[];
  priority?: boolean;
  className?: string;
}

export const AgilityPic: FC<AgilityPicProps> = ({image, alt, priority, className, sources, fallbackWidth}) => {
  const normalizedImage = normalizeImage(image);
  
  let src = normalizedImage.url;
  if (fallbackWidth !== undefined && fallbackWidth > 0) {
    src = `${normalizedImage.url}?format=auto&w=${fallbackWidth}`;
  }
  
  return (
    <picture>
      {sources?.map((source, index) => {
        let srcSet = normalizedImage.url;
        let w = Number(source.width) > 0 ? `&w=${source.width}` : ``;
        let h = Number(source.height) > 0 ? `&h=${source.height}` : ``;
        const key = `${srcSet}-${index}`;
        if (h || w) {
          if (w && !h) w = `&w=${Math.min(Number(source.width), normalizedImage.width)}`;
          if (h && !w) h = `&h=${Math.min(Number(source.height), normalizedImage.height)}`;
          srcSet = `${normalizedImage.url}?format=auto${w}${h}`;
        }
        return <source key={key} {...source} srcSet={srcSet} />;
      })}
      <img 
        loading={priority ? "eager" : "lazy"} 
        src={src} 
        alt={alt || normalizedImage.label || ""} 
        className={className} 
      />
    </picture>
  );
};