import { Box } from '@mui/material';
import type { SxProps } from '@mui/material';
import { Icon } from '@iconify/react';
import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
import noop from 'lodash/noop';

import { mergeSx } from '../Util/style';

export default function CloseButton({
  onClose = noop,
  sx = {},
  size = 20,
}: {
  onClose?: () => void;
  sx?: SxProps;
  size?: string | number;
}) {
  return (
    <Box
      onClick={onClose}
      sx={mergeSx(
        {
          fontSize: 0,
          cursor: 'pointer',
          color: 'text.secondary',
          transition: 'transform 0.25s ease-in-out 0s',
          transformOrigin: 'center',
          '&:hover': {
            transform: 'rotate(90deg)',
          },
        },
        sx
      )}>
      <Icon icon={CloseRoundedIcon} fontSize={size} />
    </Box>
  );
}
