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

import { getFontColor } from './remove.css-rules';

const _Remove = ({
  theme,
  size = 9,
  color,
}: {|
  ...ThemeProps,
  ...RemoveProps,
|}) => (
  <svg
    width={`${size}px`}
    height={`${size}px`}
    viewBox="0 0 9 9"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g>
        <path
          d="M1.834.783L4.88 3.83 7.932.783l.955.941L5.84 4.79l3.046 3.046-.955.947L4.88 5.731 1.834 8.783l-.947-.947L3.939 4.79.887 1.724z"
          fill={getFontColor(theme, color)}
          fillRule="evenodd"
        />
      </g>
    </g>
  </svg>
);

export const Remove: ComponentType<RemoveProps> = withTheme(_Remove);

Remove.displayName = 'Remove';
