import React, { FunctionComponent } from 'react'

import { ICON_NAMES } from 'utils/constants/assets';

import Icon from 'components/icon'

import { CloseButtonProps } from './close-button.types'
import { ButtonSizeOption } from '../button/button.types';

import * as Styles from './close-button.styles'

const getCloseButtonStyle = (size: ButtonSizeOption) => {
  switch(size) {
    case 'small': return Styles.closeButtonSmall;
    case 'large': return Styles.closeButtonLarge;
    default: return Styles.closeButton;
  }
}

const CloseButton: FunctionComponent<CloseButtonProps> = (props): JSX.Element => {
  const { size } = props
  return (
    <Icon
      iconName={ICON_NAMES.CROSS}
      styles={getCloseButtonStyle(size ? size : 'normal')}
      onClick={props.onClick}
    />
  )
}

CloseButton.defaultProps = {
  size: 'normal'
}

export default CloseButton