import { HiDownload } from 'react-icons/hi';
import { alpha, ButtonBase, ButtonBaseProps } from '@mui/material';
import { isFunction } from 'lodash';

export type DownloadButtonProps = ButtonBaseProps;

export default function DownloadButton({ sx, ...other }: DownloadButtonProps) {
	return (
		<ButtonBase
			sx={(theme) => ({
				p: 0,
				top: 0,
				right: 0,
				width: 1,
				height: 1,
				zIndex: 9,
				opacity: 0,
				position: 'absolute',
				color: theme.palette.common.white,
				borderRadius: 'inherit',
				transition: theme.transitions.create(['opacity']),
				'&:hover': {
					backdropFilter: 'blur(6px)',
					WebkitBackdropFilter: 'blur(6px)',
					backgroundColor: alpha(theme.palette.common.black, 0.6),
					opacity: 1
				},
				...(isFunction(sx) ? (sx as Function)(theme) : sx)
			})}
			{...other}
		>
			<HiDownload fontSize={24} />
		</ButtonBase>
	);
}