import React, { MouseEvent, ReactElement } from 'react';
import css from '../../utils/css';
import { CloseButton as StyledCloseButton } from './StyledModal';

import Icon from '../Icon';
import { CommonProps } from '../common';

export interface CloseButtonProps extends CommonProps {
  /**
   * Set the handler to handle `click` event.
   */
  onClick?: (e: MouseEvent) => void;
}

const CloseButton = ({
  onClick,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: CloseButtonProps): ReactElement => (
  <StyledCloseButton
    type="button"
    onClick={onClick}
    id={id}
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
  >
    <Icon icon="cancel" />
  </StyledCloseButton>
);

export default CloseButton;