import React from "react";
import { VideoEmbedProps } from "./types";

import { cx } from "@shared/utils";

export const ContentfulVideoEmbed: React.FC<VideoEmbedProps> = props => {
  const {
    videoAssetUrl,
    videoAssetType,
    image,
    title,
    description,
    containerClassName,
    autoplay = false,
  } = props;

  if (!videoAssetUrl) {
    return null;
  }

  return (
    <div
      className={cx(
        "relative h-0 w-full overflow-hidden pb-[56.25%]",
        containerClassName
      )}
    >
      <video
        className="absolute left-0 top-0 h-full w-full object-cover"
        controls={true}
        playsInline={true}
        preload="metadata"
        autoPlay={autoplay}
        poster={image || undefined}
        aria-label={title || "Embedded video"}
      >
        <source src={videoAssetUrl} type={videoAssetType || "video/mp4"} />
        {description || "Your browser does not support embedded videos."}
      </video>
    </div>
  );
};