// @flow
import React from 'react';
import { useTheme } from 'styled-components';

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

export const BulletPoint = () => {
  const theme = useTheme();
  return (
    <svg
      width="22px"
      height="22px"
      viewBox="0 0 22 22"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g>
          <rect
            stroke={getOutlineColor({ theme })}
            x="0.5"
            y="0.5"
            width="21"
            height="21"
            rx="10.5"
          />
          <circle fill={getFillColor(theme)} cx="11" cy="11" r="4" />
        </g>
      </g>
    </svg>
  );
};

BulletPoint.displayName = 'BulletPoint';
