import React from "react";
import { WebView } from "react-native-webview";

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={{ aspectRatio }}>
      <WebView
        originWhitelist={["*"]}
        scrollEnabled={false}
        source={{
          uri: getIframeSource(src) || src,
        }}
        style={styles.iframe}
        allowsFullscreenVideo
      />
    </View>
  );
};

export default VideoEmbed;