import "./TextMediaWidget.scss";
import { CacheableVideo } from "../../CacheableVideo.jsx";

/**
 * Media block with an accompanying text box ("textMediaWidget" element type).
 * Shows an image or a (service-worker-cacheable) video, plus optional text.
 *
 * @param {Object} props
 * @param {string|null} props.image - Image URL; mutually exclusive with video in practice.
 * @param {string|null} props.video - Video URL, played via {@link CacheableVideo}.
 * @param {string|null} props.text - Text shown below the media.
 */
export const TextMediaWidget = ({ image, video, text }) => {
  return (
    <div className="textmediacontainer">
      {image ? <img src={image} alt="" /> : null}
      {video ? (
        <CacheableVideo src={video} muted loop playsInline controls preload="metadata" />
      ) : null}
      {text && (image || video) ? <div className="textmediacontainer__space"></div> : null}
      {text ? <div className="textmediawidget__textbox">{text}</div> : null}
    </div>
  );
};