import { HiOutlineX } from 'react-icons/hi';
import { alpha, IconButton, IconButtonProps } from '@mui/material';
import { isFunction } from 'lodash';

export type RemoveButtonProps = IconButtonProps;

export default function RemoveButton({ sx, ...other }: RemoveButtonProps) {
	return (
		<IconButton
			size="small"
			sx={(theme) => ({
				p: 0.35,
				top: 4,
				right: 4,
				position: 'absolute',
				color: 'common.white',
				bgcolor: (theme) => alpha(theme.palette.common.black, 0.48),
				'&:hover': { bgcolor: (theme) => alpha(theme.palette.common.black, 0.72) },
				...(isFunction(sx) ? (sx as Function)(theme) : sx)
			})}
			{...other}
		>
			<HiOutlineX />
		</IconButton>
	);
}