// @flow
import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { getPaletteColor } from '../../../mixins/branding';
import type { CloseProps } from './close.proptypes';

export const Close = ({ colorName = 'white' }: CloseProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg width="16" height="16" viewBox="0 0 16 16">
      <g
        fill="none"
        fillRule="evenodd"
        stroke={getPaletteColor(colorName)({ theme })}
        strokeLinecap="round"
        strokeWidth="2"
      >
        <path d="M3 13L13 3M3 3l10 10" />
      </g>
    </svg>
  );
};

Close.displayName = 'CloseIcon';
