// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { BulletPointProps } from './bullet-point.proptypes';

import { getFillColor, getOutlineColor } from '../icon.css-rules';

const _BulletPoint = ({ theme }: ThemeProps & BulletPointProps) => (
  <svg
    width="22px"
    height="22px"
    viewBox="0 0 22 22"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      id="Icons/BulletPoint-Secondary"
      stroke="none"
      strokeWidth="1"
      fill="none"
      fillRule="evenodd"
    >
      <g id="Group">
        <rect
          id="Rectangle-3"
          stroke={getOutlineColor({ theme })}
          x="0.5"
          y="0.5"
          width="21"
          height="21"
          rx="10.5"
        />
        <circle id="Oval-4" fill={getFillColor(theme)} cx="11" cy="11" r="4" />
      </g>
    </g>
  </svg>
);

export const BulletPoint: ComponentType<BulletPointProps> = withTheme(
  _BulletPoint,
);

BulletPoint.displayName = 'BulletPoint';
