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

type Props = {
  isEditable: boolean,
  id: string,
  handleOnClick: ?() => void,
}

const EditButton = ({ isEditable, id, handleOnClick, ...styles }: Props) => (
  isEditable === true && (
    // $FlowFixMe: Don't want to limit styled-system props
    <ButtonBase color="#18AFB6" onClick={handleOnClick} data-edit-id={id} {...styles}>
      <Icons type="Pencil" width={28} height={21} />
    </ButtonBase>
  )
)

export default EditButton