import { Box, SxProps } from "@mui/material";

interface Props {
  videoUrl: string;
  containerSX?: SxProps;
}

export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
  const extractYoutubeVideoId =
    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
  const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];

  const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;

  return (
    <Box
      sx={{
        width: "100%",
        height: "100%",
        pointerEvents: "none",
        "& iframe": {
          width: "100%",
          height: "100%",
        },
        ...containerSX,
      }}
    >
      <Box
        component="video"
        sx={{
          width: "100%",
          height: "100%",
        }}
        autoPlay
        muted
        src={videoUrl}
      />
    </Box>
  );
}
