import React from 'react';
import { Box, Button, Typography } from '@mui/material';
import DownloadIcon from '@mui/icons-material/Download';

const VideoPlayer = ({ videoSrc, videoName }) => {
  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">Video Player</Typography>
      <video controls style={{ width: '100%', marginTop: '10px' }}>
        <source src={videoSrc} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        href={videoSrc}
        download={videoName}
        sx={{ mt: 2 }}
      >
        Download Video
      </Button>
    </Box>
  );
};

export default VideoPlayer;