import React, { FC } from 'react';

import { ColorTokens } from '../../foundation/Colors';
import { ReactComponent as CloseIcon } from './close-icon.svg';
import { CloseButtonWrapper } from './CloseButton.styled';

export type CloseButtonProps = {
  buttonBackgroundColorToken?: ColorTokens;
  buttonHoverBackgroundColorToken?: ColorTokens;
  className?: string;
  'data-testid'?: string;
  iconColorToken?: ColorTokens;
  iconHoverColorToken?: ColorTokens;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  size?: number;
};

export const CloseButton: FC<CloseButtonProps> = ({
  buttonBackgroundColorToken = 'black900',
  buttonHoverBackgroundColorToken = 'black800',
  iconHoverColorToken = 'white300',
  iconColorToken = 'white100',
  onClick,
  size = 16,
  'data-testid': dataTestId,
  className,
}) => {
  return (
    <CloseButtonWrapper
      buttonBackgroundColorToken={buttonBackgroundColorToken}
      buttonHoverBackgroundColorToken={buttonHoverBackgroundColorToken}
      className={className}
      data-testid={dataTestId || `CloseButton-CloseButtonStyled-${buttonBackgroundColorToken}`}
      iconColorToken={iconColorToken}
      iconHoverColorToken={iconHoverColorToken}
      size={size}
      onClick={onClick}
    >
      <CloseIcon />
    </CloseButtonWrapper>
  );
};