// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';

import type { ThemeProps } from '../../../types';

import { getFontColor, getFillColor } from './error.css-rules';
import { getFontFamily } from '../../../mixins/typography';

const _Error = ({ theme }: ThemeProps) => (
  <svg
    width="44px"
    height="44px"
    viewBox="0 0 44 44"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      id="Icons/Error"
      stroke="none"
      strokeWidth="1"
      fill="none"
      fillRule="evenodd"
    >
      <g id="Icons/alert">
        <circle id="Oval-3" fill={getFillColor(theme)} cx="22" cy="22" r="10" />
        <text
          id="!"
          fontFamily={getFontFamily({ theme, bold: true })}
          fontSize="16"
          fontWeight="600"
          fill={getFontColor(theme)}
        >
          <tspan x="19.3125" y="27.5">
            !
          </tspan>
        </text>
      </g>
    </g>
  </svg>
);

export const ErrorIcon: ComponentType<{}> = withTheme(_Error);

ErrorIcon.displayName = 'ErrorIcon';
ErrorIcon.propTypes = {};
