import React from 'react';
import IdealImage from '@endiliey/react-ideal-image';

export default function Image(props) {
  const { alt, className, img, caption } = props;
  return (
    <figure>
      <IdealImage
        {...props}
        alt={alt}
        className={className}
        height={img.src.height || 100}
        width={img.src.width || 100}
        placeholder={{ lqip: img.preSrc }}
        src={img.src.src}
        srcSet={img.src.images.map((image) => ({
          ...image,
          src: image.path,
        }))}
      />
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  );
}