// @flow
import React from 'react';
import { withTheme } from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import type { BrandProps } from '../../../mixins/branding';
import type { ThemeProps } from '../../../types';

const _Close = ({ colorName = 'white', ...props }: ThemeProps & BrandProps) => (
  <svg width="16" height="16" viewBox="0 0 16 16">
    <g
      fill="none"
      fillRule="evenodd"
      stroke={getPaletteColor(colorName)(props)}
      strokeLinecap="round"
      strokeWidth="2"
    >
      <path d="M3 13L13 3M3 3l10 10" />
    </g>
  </svg>
);

export const Close = withTheme(_Close);

Close.displayName = 'CloseIcon';
