// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import { getFontColor } from './add.css-rules';
import type { AddProps } from './add.proptypes';

const _Add = ({
  theme,
  colorName = 'brand-primary-base',
}: {|
  ...ThemeProps,
  ...AddProps,
|}) => (
  <svg
    width="12px"
    height="12px"
    viewBox="0 0 12 12"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      stroke="none"
      strokeWidth="1"
      fill={getFontColor(theme, colorName)}
      fillRule="evenodd"
    >
      <path d="M4.894 0H6.88v5.012h4.894v1.956H6.88V12H4.894V6.968H0V5.012h4.894z" />
    </g>
  </svg>
);

export const Add: ComponentType<AddProps> = withTheme(_Add);

Add.displayName = 'Add';
