import { theme } from '@expo/styleguide';
import React from 'react';

export const WhyImage = () => (
  <svg
    style={{
      position: 'absolute',
      right: 20,
      bottom: 20,
    }}
    width="144"
    height="82"
    viewBox="0 0 144 82"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      opacity="0.4"
      d="M40.7406 74.6911C59.4909 74.6911 74.6911 59.4909 74.6911 40.7406C74.6911 21.9903 59.4909 6.7901 40.7406 6.7901C21.9903 6.7901 6.7901 21.9903 6.7901 40.7406C6.7901 59.4909 21.9903 74.6911 40.7406 74.6911Z"
      fill={theme.palette.green5}
      stroke={theme.palette.green9}
      strokeWidth="6.7901"
      strokeLinecap="round"
    />
    <path
      d="M30.861 30.5555C31.6592 28.2865 33.2346 26.3732 35.3084 25.1545C37.3821 23.9357 39.8202 23.4902 42.1909 23.8969C44.5616 24.3035 46.7119 25.536 48.2609 27.3762C49.8099 29.2163 50.6577 31.5453 50.6541 33.9506C50.6541 40.7407 40.469 44.1357 40.469 44.1357M40.7406 57.7159H40.7745"
      stroke={theme.palette.green9}
      strokeWidth="6.7901"
      strokeLinecap="round"
    />
    <path
      d="M102.389 74.6911C121.139 74.6911 136.339 59.4909 136.339 40.7406C136.339 21.9903 121.139 6.7901 102.389 6.7901C83.6385 6.7901 68.4383 21.9903 68.4383 40.7406C68.4383 59.4909 83.6385 74.6911 102.389 74.6911Z"
      fill={theme.palette.green5}
    />
    <path
      d="M102.451 74.6911C121.201 74.6911 136.401 59.4909 136.401 40.7406C136.401 21.9903 121.201 6.7901 102.451 6.7901C83.7002 6.7901 68.5 21.9903 68.5 40.7406C68.5 59.4909 83.7002 74.6911 102.451 74.6911Z"
      stroke={theme.palette.green7}
      strokeWidth="6.7901"
      strokeLinecap="round"
    />
    <path
      d="M87 40.6664L97.1852 50.8515L117.555 30.4812"
      stroke={theme.palette.green10}
      strokeWidth="6.7901"
      strokeLinecap="round"
    />
  </svg>
);
