// Generated with util/create-component.js
import React from "react";
import Text from "../../UI/Text";
import ContentsEditorDivider from "../Divider";
import { VideoProps } from "./Video.types";

const VideoElement: React.FC<VideoProps> = ({
  src,
  thumbnail,
  preload,
  isUsingControllBar = false,
  isMute = true,
  isAutoPlay = false,
  isInfiniteLoop = true,
  widthRatio,
  heightRatio,
  title,
  description,
  style,
  isIOS,
  outerVideoDivClassname,
}) => {
  const ratio = widthRatio && heightRatio ? heightRatio / widthRatio : 9 / 16;

  return (
    <div
      data-testid="ContentsEditorVideo"
      className={`nrc--ContentsEditorVideo flex flex-col items-center ${outerVideoDivClassname}`}
    >
      {title && (
        <Text type="B5" className="mb-[0.6rem] text-gray-10">
          {title}
        </Text>
      )}

      <div
        data-testid="Video"
        className="relative w-full nrc--Video"
        style={{ ...style, paddingTop: ratio * 100 + "%" }}
      >
        <video
          width="100%"
          height="auto"
          preload={preload}
          controls={isIOS ? true : isUsingControllBar}
          autoPlay={isIOS ? false : isAutoPlay}
          poster={isIOS ? thumbnail : undefined}
          muted={isMute}
          controlsList="nofullscreen nodownload noremoteplayback"
          loop={isInfiniteLoop}
          playsInline
          className="absolute top-0 bottom-0 left-0 right-0 object-fill"
        >
          <source src={src} width="100%" height="100%" />
        </video>
      </div>

      {description && (
        <div className="mt-[0.6rem] w-full">
          <ContentsEditorDivider color="#EFEFEF" height={1} />
          <Text
            type="B9"
            className="mt-[0.6rem] whitespace-pre-wrap text-center text-gray-7"
          >
            {description}
          </Text>
        </div>
      )}
    </div>
  );
};

export default VideoElement;