import React from 'react'
import Icon from '$core-components/Icon'
import { t } from '$themelocalization'

import './CrossCloseButton.scss'

const CrossCloseButton = ({ onPress, className }) => {
  return (
    <div onClick={onPress} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onPress(e) } }} tabIndex="0" role="button" aria-label={t('General.Close')}
      className={`cross-close-button-container ${className || ''}`}>
      <Icon name="close_black.svg" width="15px" height="15px" className="cross-close-button" ariaHidden="true"/>
    </div>
  )
}

export default CrossCloseButton
