import "./TextMediaWidget.scss";
import { CacheableVideo } from "../../CacheableVideo.jsx";
import { ImageCard } from "../ImageCard/ImageCard.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.
 * @param {number|null} [props.level] - When `1`, wraps `image` in an {@link ImageCard} instead of a plain `<img>`.
 */
export const TextMediaWidget = ({ image, video, text, level }) => {
  return (
    <div
      className={`textmediacontainer textmediacontainer--level${level} ${video ? "textmediacontainer--notop" : ""}`}>
      {image ? (
        level ? (
          <ImageCard image={image} />
        ) : (
          <img className="vidph" src={image} alt="" />
        )
      ) : null}
      {video ? (
        <CacheableVideo
          className="vidph"
          src={video}
          autoPlay
          muted
          playsInline
          preload="metadata"
        />
      ) : null}
      {/* {text && (image || video) ? <div className="textmediacontainer__space"></div> : null} */}
      {text ? (
        <div className="textmediawidget__textboxframe">
          <div className="textmediawidget__textbox">{text}</div>
        </div>
      ) : null}
    </div>
  );
};