import React from 'react';

interface TooFarIllustrationProps {
  title: string;
  testId?: string;
}

export const TooFarIllustration: React.FC<TooFarIllustrationProps> = ({
  title,
  testId,
}) => {
  return (
    <svg width="150" height="150" data-testid={testId}>
      <title>{title}</title>
      <defs>
        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
          <stop offset="0%" stopColor="#C2C2C2" />
          <stop offset="100%" stopColor="#C2C2C2" stopOpacity="0" />
        </linearGradient>
      </defs>
      <g fill="none" fillRule="evenodd" transform="translate(2)">
        <path fill="#FFF" fillRule="nonzero" d="M3.997 0h136v150h-136z" />
        <path fill="url(#a)" fillRule="nonzero" d="M4.333 0h138v150h-138z" />
        <path
          fill="#5B361E"
          fillRule="nonzero"
          stroke="#000"
          strokeWidth="1.353"
          d="m22.515 58.137-1.895 82.434 98.784-2.343c0-8.798.813-16.271.813-31.497 0-15.748-2.345-55.36-3.766-64.125C108.16 11.338 74.737 5.03 56.707 11.04c-28.425 9.475-33.64 35.095-34.192 47.097Z"
        />
        <path
          fill="#EF992A"
          fillRule="nonzero"
          d="M38.104 138.228c8.339-3.98 5.1-1.525 15.916-3.104H90.5c5.448 0 9.541 3.104 28.904 3.104 6.391 0 5.987 8.988-2.473 8.988-24.315 1.08-66.07 1.08-78.281 0-77.975-6.896-10.97-4.014-.546-8.988Z"
        />
        <path
          fill="#FCDDCC"
          fillRule="nonzero"
          stroke="#000"
          strokeWidth="1.353"
          d="m54.306 134.26 2.645-21.765h30.498l3.05 21.765c-15.778 14.791-30.703 6.163-36.193 0zm-27.59-54.458C25.42 66.68 33.467 67.18 37.653 69.07l2.837 25.314c-10.328-2.228-13.772-12.961-13.772-14.58zm89.512-.81c4.05-15.067-3.984-15.998-8.506-14.58L105.9 91.75c10.328-8.505 9.113-12.758 10.328-12.758z"
        />
        <path
          fill="#FCDDCC"
          fillRule="nonzero"
          stroke="#000"
          strokeWidth="1.353"
          d="M53.564 109.804c-14.195-8.986-16.116-30.658-15.302-40.37 2.24-5.21 4.37-5.723 7.958-11.909 6.3-10.86 9.028-25.451 10.579-25.009 14.241 16.008 50.215 20.259 50.649 31.708v13.023c0 4.178-.911 14.358-4.558 21.65-8.986 13.674-20.131 18.612-24.58 19.372-2.334.922-10.55.521-24.746-8.465Z"
        />
        <path
          fill="#000"
          fillRule="nonzero"
          d="m83.935 98.402.85 1.052c-7.974 6.435-17.2 5.243-23.018.18l-.23-.204.905-1.004c5.273 4.756 13.744 5.998 21.175.227l.318-.251Z"
        />
        <ellipse
          cx="56.448"
          cy="72.613"
          fill="#000"
          fillRule="nonzero"
          rx="3.128"
          ry="4.294"
        />
        <path
          fill="#000"
          fillRule="nonzero"
          d="M50.664 61.476c2.917-1.694 7.404-2.147 11.244-.172l.31.165-.655 1.183c-3.348-1.854-7.361-1.545-9.985-.137l-.234.13-.68-1.17Z"
        />
        <ellipse
          cx="89.709"
          cy="72.613"
          fill="#000"
          fillRule="nonzero"
          rx="3.128"
          ry="4.294"
        />
        <path
          fill="#000"
          fillRule="nonzero"
          d="M83.926 61.476c2.917-1.694 7.404-2.147 11.244-.172l.31.165-.655 1.183c-3.348-1.854-7.361-1.545-9.985-.137l-.234.13-.68-1.17Z"
        />
        <path
          stroke="#000"
          strokeWidth="1.353"
          d="M69.005 82.806c0 1.858.859 5.487 4.287 5.144"
        />
        <path
          fill="#FFF"
          d="M73.004 0H0v150h146V0H73.004Zm.496 0C98.629 0 119 33.579 119 75s-20.371 75-45.5 75S28 116.421 28 75 48.371 0 73.5 0Z"
        />
        <path
          stroke="#AEB3B7"
          strokeWidth="2"
          d="M118.4 75c0 20.555-5.156 39.117-13.441 52.507C96.665 140.913 85.338 149 72.999 149c-12.34 0-23.667-8.087-31.961-21.493C32.753 114.117 27.597 95.555 27.597 75c0-20.555 5.156-39.117 13.44-52.507C49.333 9.087 60.66 1 72.999 1c12.34 0 23.667 8.087 31.961 21.493C113.244 35.883 118.4 54.445 118.4 75Z"
        />
      </g>
    </svg>
  );
};