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

export const CodecademyImage = () => (
  <svg
    style={{
      position: 'absolute',
      right: 20,
      bottom: 20,
    }}
    width="126"
    height="154"
    viewBox="0 0 126 154"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M124.537 66.131H125.037V65.631V26.277C125.037 12.5473 113.907 1.41711 100.177 1.41711C86.4475 1.41711 75.3173 12.5473 75.3173 26.277V65.631V66.131H75.8173H124.537Z"
      fill={theme.palette.orange11}
      stroke={theme.palette.orange12}
    />
    <g mask="url(#9cc3c1cf68eeb3d655221dab7774e70e)">
      <circle cx="87.8602" cy="65.6313" r="22.3086" fill="#E36209" />
      <circle cx="117.339" cy="57.2905" r="24.8014" fill={theme.palette.orange5} />
    </g>
    <rect
      x="83.2422"
      y="28.8251"
      width="5.25203"
      height="81.4467"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
    <rect
      x="51.0929"
      y="104.52"
      width="6.25203"
      height="34.3855"
      transform="rotate(-90 51.0929 104.52)"
      fill={theme.palette.orange5}
    />
    <rect
      x="45.3402"
      y="28.8251"
      width="5.25203"
      height="81.4467"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
    <path
      d="M92.4965 153.311H8.03833V91.8871H92.4965H114.049V153.311H92.4965Z"
      fill={theme.palette.orange7}
    />
    <path
      d="M92.4965 91.8871V153.311M92.4965 91.8871H8.03833V153.311H92.4965M92.4965 91.8871H114.049V153.311H92.4965"
      stroke={theme.palette.orange12}
    />
    <path
      d="M85.3575 110.831L92.2273 91.8376H7.63462L0.764648 110.831H85.3575Z"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
    <path
      d="M99.6462 110.772L92.5371 91.3468H114.685L121.794 110.772H99.6462Z"
      fill={theme.palette.orange12}
    />
    <path
      d="M16.3497 77.6834L16.7746 77.4198L16.628 77.1834H16.3497V77.6834ZM19.0845 82.0917L18.6596 82.3553L19.0595 82.9999L19.4943 82.3782L19.0845 82.0917ZM22.1672 77.6834V77.1834H21.9067L21.7574 77.3968L22.1672 77.6834ZM2.99518 69.0624C2.99518 64.5774 6.63104 60.9415 11.1161 60.9415V59.9415C6.07875 59.9415 1.99518 64.0251 1.99518 69.0624H2.99518ZM11.1161 77.1834C6.63104 77.1834 2.99518 73.5475 2.99518 69.0624H1.99518C1.99518 74.0998 6.07876 78.1834 11.1161 78.1834V77.1834ZM16.3497 77.1834H11.1161V78.1834H16.3497V77.1834ZM19.5094 81.8281L16.7746 77.4198L15.9249 77.9469L18.6596 82.3553L19.5094 81.8281ZM21.7574 77.3968L18.6748 81.8052L19.4943 82.3782L22.5769 77.9699L21.7574 77.3968ZM24.317 77.1834H22.1672V78.1834H24.317V77.1834ZM32.438 69.0624C32.438 73.5475 28.8021 77.1834 24.317 77.1834V78.1834C29.3544 78.1834 33.438 74.0998 33.438 69.0624H32.438ZM24.317 60.9415C28.8021 60.9415 32.438 64.5774 32.438 69.0624H33.438C33.438 64.0251 29.3544 59.9415 24.317 59.9415V60.9415ZM11.1161 60.9415H24.317V59.9415H11.1161V60.9415Z"
      fill={theme.palette.orange12}
    />
    <path
      d="M8.89862 71.8065V67.585C8.89862 66.5058 9.77347 65.631 10.8527 65.631V65.631C11.9318 65.631 12.8067 66.5058 12.8067 67.585V69.9776C12.8067 70.9877 13.6255 71.8065 14.6356 71.8065V71.8065C15.6457 71.8065 16.4645 70.9877 16.4645 69.9776V67.7555C16.4645 66.5822 17.4157 65.631 18.5891 65.631V65.631C19.7624 65.631 20.7136 66.5822 20.7136 67.7555V70.0293C20.7136 71.0108 21.5093 71.8065 22.4908 71.8065V71.8065C23.4723 71.8065 24.268 71.0108 24.268 70.0293V68.6254C24.268 66.9716 25.6087 65.631 27.2625 65.631V65.631"
      stroke={theme.palette.orange11}
    />
    <path
      d="M50.5922 28.3442C50.5922 28.563 50.4276 28.865 49.933 29.141C49.4549 29.4079 48.7605 29.5886 47.9662 29.5886C47.172 29.5886 46.4776 29.4079 45.9994 29.141C45.5048 28.865 45.3402 28.563 45.3402 28.3442C45.3402 28.1253 45.5048 27.8233 45.9994 27.5473C46.4776 27.2805 47.172 27.0997 47.9662 27.0997C48.7605 27.0997 49.4549 27.2805 49.933 27.5473C50.4276 27.8233 50.5922 28.1253 50.5922 28.3442Z"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
    <path
      d="M88.4942 28.3442C88.4942 28.563 88.3296 28.865 87.835 29.141C87.3568 29.4079 86.6625 29.5886 85.8682 29.5886C85.0739 29.5886 84.3796 29.4079 83.9014 29.141C83.4068 28.865 83.2422 28.563 83.2422 28.3442C83.2422 28.1253 83.4068 27.8233 83.9014 27.5473C84.3796 27.2805 85.0739 27.0997 85.8682 27.0997C86.6625 27.0997 87.3568 27.2805 87.835 27.5473C88.3296 27.8233 88.4942 28.1253 88.4942 28.3442Z"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
    <rect
      x="16.726"
      y="138.493"
      width="22.4272"
      height="9.25901"
      fill={theme.palette.orange11}
      stroke={theme.palette.orange12}
    />
    <rect
      x="42.7644"
      y="138.223"
      width="0.45945"
      height="9.79956"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
      strokeWidth="0.45945"
    />
    <rect
      x="46.5634"
      y="138.223"
      width="0.45945"
      height="9.79956"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
      strokeWidth="0.45945"
    />
    <path
      d="M83.0713 70.4762L83.0713 75.7282L51.4537 75.7282C50.4773 75.7282 49.6858 74.9367 49.6858 73.9603L49.6858 72.2441C49.6858 71.2677 50.4773 70.4762 51.4537 70.4762L83.0713 70.4762Z"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
    <path
      d="M83.0713 47.1898L83.0713 52.4419L51.4537 52.4419C50.4773 52.4419 49.6858 51.6503 49.6858 50.6739L49.6858 48.9578C49.6858 47.9814 50.4773 47.1898 51.4537 47.1898L83.0713 47.1898Z"
      fill={theme.palette.orange5}
      stroke={theme.palette.orange12}
    />
  </svg>
);

export const CodecademyImageMasks = () => (
  <svg width="0" height="0">
    <mask
      id="9cc3c1cf68eeb3d655221dab7774e70e"
      style={{ maskType: 'alpha' }}
      maskUnits="userSpaceOnUse"
      x="75"
      y="1"
      width="50"
      height="65">
      <path
        d="M75.8173 26.277C75.8173 12.8234 86.7236 1.91711 100.177 1.91711V1.91711C113.631 1.91711 124.537 12.8234 124.537 26.277V65.631H75.8173V26.277Z"
        fill="#11162D"
      />
    </mask>
  </svg>
);