import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
import Check from '@mui/icons-material/Check';
import {CircularProgress} from "@mui/material"
const DownloadSection = ({ downloadStatus, onDownloadClick }) => {
    return (
        <div
            style={{
                cursor: 'pointer',
                width: '30',
                height: '30',
                backgroundColor: downloadStatus === 'completed' ? '#0070f3' : 'white',
                border: `1px solid ${downloadStatus === 'completed' ? '#0070f3' : 'gray'}`,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                transition: 'background 0.2s, box-shadow 0.2s',
                boxShadow: downloadStatus === 'completed' ? '0 0 5px rgba(0, 112, 243, 0.5)' : 'none',
                padding:'5px'
            }}
            onClick={onDownloadClick}
        >
            {downloadStatus === 'completed' ? (
                <>
                    <Check sx={{ color: 'white' }} fontSize="medium" />
                </>
            ) : downloadStatus === 'downloading' ? (
                <CircularProgress size={25} />
            ) : (
                <>
                    <FileDownloadOutlinedIcon sx={{ color: '#0070f3' }} fontSize="medium" />
                </>
            )}
        </div>
    );
};

export default DownloadSection;