// @flow
import React from 'react'
import { ButtonBase } from '../Button'
import Icons from '../Icons'

type Props = {
  name: string,
  handleOnClick: (Event) => void,
  isEditing?: boolean,
}

const RemoveButton = ({ isEditing, name, handleOnClick, ...styles }: Props) => (
  isEditing === false && (
    // $FlowFixMe: Don't want to limit styled-system props
    <ButtonBase pb="0" type="button" name={name} onClick={handleOnClick} {...styles}>
      <Icons
        type="CircleX"
        noBorder
        width={18}
        height={18}
        color="white"
        bg="#959495"
        borderRadius="100px"
      />
    </ButtonBase>
  )
)

RemoveButton.defaultProps = {
  isEditing: false,
}

export default RemoveButton