// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { MapPinProps } from './map-pin.proptypes';
import { mapPinPropTypes } from './map-pin.proptypes';

import { getIconColor } from './map-pin.css-rules';

const _MapPin = ({ theme, disabled }: ThemeProps & MapPinProps) => (
  <svg
    width="44px"
    height="44px"
    viewBox="0 0 44 44"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      id="Icons/Map-Pin"
      stroke="none"
      strokeWidth="1"
      fill="none"
      fillRule="evenodd"
    >
      <path
        d="M22.0006604,31.3318105 C25.4213635,26.7472302 27.5300104,23.6377505 28.2985225,22.0584465 C28.7580311,21.1141496 29,20.0753276 29,19 C29,15.1340068 25.8659932,12 22,12 C18.1340068,12 15,15.1340068 15,19 C15,20.0855369 15.246594,21.1338364 15.7145279,22.0851207 C16.4872399,23.6560025 18.5918301,26.7561193 22.0006604,31.3318105 Z"
        id="Combined-Shape"
        stroke={getIconColor({ theme, disabled })}
        strokeWidth="2"
      />
      <circle
        id="Oval"
        fill={getIconColor({ theme, disabled })}
        cx="22"
        cy="19"
        r="3"
      />
    </g>
  </svg>
);

export const MapPin: ComponentType<MapPinProps> = withTheme(_MapPin);

MapPin.displayName = 'MapPin';
MapPin.propTypes = mapPinPropTypes;
