import React from 'react'
import { Consumer } from '../ModalContext'
import { CloseButtonProps } from './typings'
import { StyledCloseButton } from './styled'
import { makeCloseButtonHandler } from './deps'

class CloseButton extends React.PureComponent<CloseButtonProps> {
  renderContext = context => {
    console.debug('[modal] render: close button')
    const attributes = { ...this.props, ...context }
    const handleCloseButton = makeCloseButtonHandler(attributes)
    return <StyledCloseButton {...attributes} onClick={handleCloseButton} />
  }
  render() {
    return <Consumer>{this.renderContext}</Consumer>
  }
}

export { CloseButton }
export default CloseButton