import { FC } from 'react';

import CloseIcon from '@material-hu/icons/material/Close';
import Box from '@material-hu/mui/Box';

export type CloseButtonProps = {
  handleOnClose: () => void;
};

export const CloseButton: FC<CloseButtonProps> = props => {
  const { handleOnClose } = props;

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '28px',
        height: '28px',
        borderRadius: '50%',
        cursor: 'pointer',
        '&:hover': {
          backgroundColor: 'rgba(0, 0, 0, 0.04)',
        },
      }}
      onClick={handleOnClose}
    >
      <CloseIcon sx={{ color: '#000', fontSize: '18px' }} />
    </Box>
  );
};

export default CloseButton;
