import React, { forwardRef } from 'react';

import './RacetrackPath.css';

const RacetrackPath = forwardRef((_, ref) => (
  <>
    <svg
      fill="none"
      id="racetrack"
      ref={ref}
      viewBox="0 0 318 132"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        opacity="0.5"
        d="M99.8394 40.7356C75.6404 54.3177 34.1985 77.8167 13.9386 91.8436C7.21919 96.496 -2.98761 110.647 21.5284 120.503C46.0444 130.358 57.2778 126.237 78.3059 119.185C92.0191 114.587 110.489 100.856 110.489 100.856C110.489 100.856 130.44 87.8082 136.282 86.2976C147.298 83.4483 166.606 83.5246 166.606 83.5246C166.606 83.5246 239.803 81.7914 252.003 81.0982C264.202 80.4049 313 81.7914 313 68.9663L312.303 45.7423C312.303 35.3436 301.187 33.7148 290.692 32.2239C283.373 31.1841 258.974 31.1004 243.289 28.411C227.255 25.662 186.474 9 170.44 9C154.407 8.99999 126.78 25.4574 117.46 30.8374C114.997 32.259 108.53 35.8578 99.8394 40.7356Z"
        stroke="#39FF88"
        strokeWidth="10"
      />
      <path
        d="M99.8394 36.7356C75.6404 50.3177 34.1985 73.8167 13.9386 87.8436C7.21919 92.496 -2.98761 106.647 21.5284 116.503C46.0444 126.358 57.2778 122.237 78.3059 115.185C92.0191 110.587 110.489 96.8559 110.489 96.8559C110.489 96.8559 130.44 83.8082 136.282 82.2976C147.298 79.4483 166.606 79.5246 166.606 79.5246C166.606 79.5246 239.803 77.7914 252.003 77.0982C264.202 76.4049 313 77.7914 313 64.9663L312.303 41.7423C312.303 31.3436 301.187 29.7148 290.692 28.2239C283.373 27.1841 258.974 27.1004 243.289 24.411C227.255 21.662 186.474 5 170.44 5C154.407 4.99999 126.78 21.4574 117.46 26.8374C114.997 28.259 108.53 31.8578 99.8394 36.7356Z"
        stroke="#39FF88"
        strokeWidth="10"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M93.1456 46.5005V50.2383L90.1456 51.9375V48.0622L93.1456 46.5005Z"
        fill="#C4C4C4"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M93.1456 46.5005L90.1456 48.0622L81 41.62L83.8619 40L93.1456 46.5005Z"
        fill="white"
      />
    </svg>
    <svg
      className="racetrack-flag"
      fill="none"
      viewBox="0 0 318 132"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 89.9992 37.0001)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 89.9992 34.9999)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 87.9992 32.9999)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 87.9995 37.0002)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 87.9995 35)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 87.9992 32.9999)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 87.9995 37.0002)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 87.9995 35)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 89.999 32.9999)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 85.9997 37.0001)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 85.9997 35.0001)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 83.9999 33.0001)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 91.9997 33.0001)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 83.9999 37)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 91.9997 37.0001)"
        fill="white"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 83.9999 34.9999)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 92 34.9999)"
        fill="black"
      />
      <rect
        width="1.99993"
        height="1.99993"
        transform="matrix(-1.19249e-08 -1 -1 1.19249e-08 85.9995 32.9999)"
        fill="black"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M92 47V37H91V47H92Z"
        fill="white"
      />
    </svg>
  </>
));

export default RacetrackPath;