import React from "react";
// eslint-disable-next-line camelcase
import { unstable_createElement } from "react-native-web";

import getIframeSource from "../../utils/getIframeSource";
import { View } from "../View";
import styles from "./styles";

type Props = {
  aspectRatio?: number;
  src: string;
};

const VideoEmbed = ({ aspectRatio = 16 / 9, src }: Props) => {
  return (
    <View
      style={[styles.container, { paddingBottom: `${100 / aspectRatio}%` }]}
    >
      {unstable_createElement("iframe", {
        allowFullScreen: true,
        frameBorder: "0",
        scrolling: "no",
        src: getIframeSource(src) || src,
        style: styles.iframe,
      })}
    </View>
  );
};

export default VideoEmbed;