// @flow
import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { getFontColor, getFillColor } from './error.css-rules';
import { getFontFamily } from '../../../mixins/typography';

export const ErrorIcon = () => {
  const theme = useContext(ThemeContext);
  return (
    <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>
  );
};

ErrorIcon.displayName = 'ErrorIcon';
