import React from 'react';
import { Box } from '@mui/material';
import PropTypes from 'prop-types';

const VideoAds = ({ video_url, height, width }) => {
  return (
    <Box
      sx={{
        position: 'relative',
        overflow: 'hidden',
        width: width || '100%',
        height: height || '300px',
        
      }}
    >
      <video
        src={video_url}
        autoPlay
        loop
        muted
        playsInline
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: 'auto',
        }}
      />
    </Box>
  );
};

VideoAds.propTypes = {
  video_url: PropTypes.string.isRequired,
  height: PropTypes.string,
  width: PropTypes.string,
};

VideoAds.defaultProps = {
  video_url: 'https://www.w3schools.com/html/mov_bbb.mp4',
  height: '300px',
  width: '100%',
};

export default VideoAds;