import { MediaContainer } from './styles.js';
import Audio from './components/audio/index.js';
import Image from './components/image/index.js';
import React from 'react';
import Video from './components/video/index.js';
import { jsx as _jsx } from "react/jsx-runtime";
const Media = ({
  data: {
    fields
  },
  viewportBreakpoint,
  media
}) => {
  const {
    image,
    video,
    audio
  } = fields;
  const hasImage = image !== undefined ? image?.type === 'image' : false;
  const hasVideo = video !== undefined ? video?.type === 'video' : false;
  const hasAudio = audio !== undefined ? audio?.customType === 'Audio' : false;
  let content;
  if (hasVideo) {
    content = /*#__PURE__*/_jsx(Video, {
      data: fields // cast is valid as check has been done before
      ,
      hasVideo: hasVideo,
      breakpoint: viewportBreakpoint,
      media: media
    });
  } else if (hasAudio) {
    content = /*#__PURE__*/_jsx(Audio, {
      data: fields // cast is valid as check has been done before
      ,
      hasAudio: hasAudio,
      breakpoint: viewportBreakpoint,
      media: media
    });
  } else if (hasImage) {
    content = /*#__PURE__*/_jsx(Image, {
      data: fields // cast is valid as check has been done before
      ,
      showAsThumbnail: false,
      breakpoint: viewportBreakpoint,
      media: media
    });
  } else {
    return null;
  }
  return /*#__PURE__*/_jsx("div", {
    style: MediaContainer,
    "data-test": 'mediaComponent',
    children: content
  });
};
export default Media;