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

const AudioPlayer = ({ audioSrc, audioName }) => {
  return (
    <Box sx={{ my: 2, textAlign: 'center' }}>
      <Typography variant="h6">Audio Player</Typography>
      <audio controls style={{ width: '100%', marginTop: '10px' }}>
        <source src={audioSrc} type="audio/mpeg" />
        Your browser does not support the audio element.
      </audio>
      <Button
        variant="contained"
        color="primary"
        startIcon={<DownloadIcon />}
        href={audioSrc}
        download={audioName}
        sx={{ mt: 2 }}
      >
        Download Audio
      </Button>
    </Box>
  );
};

export default AudioPlayer;