export default function ResponsiveImage(props) {
  const { media, mediaClass } = props;
  const { url, alt, sizes } = media;

  let thumbnailImg = url;
  let mediumImg = url;
  let largeImg = url;

  if (sizes !== undefined && sizes.length > 0) {
    const { thumbnail, medium, large } = sizes;
    thumbnailImg = thumbnail;
    mediumImg = medium;
    largeImg = large;
  }

  return (
    <picture className="bf_responsive-media">
      {thumbnailImg ? (
        <source
          media="(max-width: 576px)"
          srcSet={thumbnailImg}
          className={`${mediaClass}`}
        />
      ) : null}
      {mediumImg ? (
        <source
          media="(min-width: 768px)"
          srcSet={mediumImg}
          className={`${mediaClass}`}
        />
      ) : null}
      {largeImg ? (
        <source
          media="(min-width: 1200px)"
          srcSet={largeImg}
          className={`${mediaClass}`}
        />
      ) : null}
      {mediumImg ? (
        <img src={mediumImg} alt={alt} className={`${mediaClass}`} />
      ) : null}
    </picture>
  );
}