import React from 'react'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'

// extending interface from Label component
interface Props extends DefaultProps { }

const wording = {
  description: 'A pin, symbolizing Locations in Map',
  title: 'Map Marker icon',
}

class MapMarkerIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '18px',
    height: '28px',
    viewBox: '0 0 18 28',
    fill: '#119fd5',
    mapindex: 3,
  }

  render() {
    return (
      <Vector {...this.props} {...wording}>
        <g>
          <path d="M17,13 C14,20 9,28 9,28 C9,28 4,20 1,13 C-2,6 3,0 9,0 C15,0 20,6 17,13 Z" />
          <text fontSize="12" fill="#FFFFFF">
            <tspan x="50%" y="50%" textAnchor="middle">
              {this.props.mapindex}
            </tspan>
          </text>
        </g>
      </Vector>
    )
  }
}

export { MapMarkerIcon }
export default MapMarkerIcon