import React from 'react'
import PropTypes from 'prop-types'
import { theme } from '@aragon/ui'

const IconEdit = ({ alt, color, height, width  }) => (
  <svg width={width} height={height} viewBox="0 0 24 24" fill={color}>
    <title>{alt}</title>
    <path
      d="M17.8831 13.3099C17.5261 13.3099 17.2368 13.5992 17.2368 13.9562V17.8832C17.2368 18.3378 16.8669 18.7076 16.4124 18.7076H6.1169C5.6623 18.7076 5.29248 18.3377 5.29248 17.8832V7.58774C5.29248 7.13314 5.66233 6.76332 6.1169 6.76332H10.0439C10.4008 6.76332 10.6902 6.47393 10.6902 6.11699C10.6902 5.76004 10.4008 5.47066 10.0439 5.47066H6.1169C4.94953 5.47066 3.99979 6.4204 3.99979 7.58777V17.8832C3.99982 19.0505 4.94956 20.0002 6.1169 20.0002H16.4123C17.5797 20.0002 18.5294 19.0505 18.5294 17.8831V13.9562C18.5294 13.5992 18.2401 13.3099 17.8831 13.3099Z"
    />
    <path
      d="M19.8109 7.13085L16.8694 4.18931C16.6169 3.9369 16.2077 3.9369 15.9553 4.18931L8.60146 11.5432C8.48027 11.6644 8.41214 11.8288 8.41214 12.0002V14.9418C8.41214 15.2987 8.70152 15.5881 9.05847 15.5881H12C12.1715 15.5881 12.3358 15.52 12.457 15.3988L19.8109 8.04491C19.9321 7.92369 20.0002 7.75927 20.0002 7.58786C20.0002 7.41645 19.9321 7.25207 19.8109 7.13085ZM11.7323 14.2954H9.70483V12.2679L16.4123 5.56041L18.4398 7.5879L11.7323 14.2954Z"
    />
  </svg>
)

IconEdit.propTypes = {
  alt: PropTypes.string,
  color: PropTypes.string,
  height: PropTypes.number,
  width: PropTypes.number,
}

IconEdit.defaultProps = {
  alt: 'Edit',
  color: theme.textTertiary,
  height: 24,
  width: 24,
}

export default IconEdit

