// @flow
import React from 'react';
import styled from 'styled-components';

const Svg = styled.svg`
  min-width: 5rem;
`;

/** A simple tick */
const Tick = () => (
  <Svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <defs>
      <polygon id="path-1" points="0 0 49.9998 0 49.9998 50 0 50" />
    </defs>
    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
      <g transform="translate(-200.000000, -930.000000)">
        <g transform="translate(200.000000, 930.000000)">
          <mask id="mask-2" fill="white">
            <use xlinkHref="#path-1" />
          </mask>
          <path
            d="M22.4078,35.772 C21.8318,36.348 21.0258,36.693 20.1608,36.693 C19.2968,36.693 18.4908,36.348 17.9148,35.772 L9.4468,27.304 L13.9398,22.811 L20.1608,29.032 L35.0808,14.113 L39.5738,18.606 L22.4078,35.772 Z M24.9998,0 C11.1748,0 -0.0002,11.175 -0.0002,25 C-0.0002,38.825 11.1748,50 24.9998,50 C38.8248,50 49.9998,38.825 49.9998,25 C49.9998,11.175 38.8248,0 24.9998,0 Z"
            id="Fill-1"
            fill="#1AA9B7"
            mask="url(#mask-2)"
          />
        </g>
      </g>
    </g>
  </Svg>
);

export default Tick;