import React from "react";
import { useTranslation } from "react-i18next";

const Car = ({ dmg1, dmg2 }) => {
  const { t } = useTranslation();

  return (
    <div style={{ position: "relative", textAlign: "center" }}>
      {t("jobs.labels.cards.damage")}
      <svg
        style={{ left: 0, top: 0, width: "100%", height: "100%" }}
        id="svg166"
        version="1.1"
        viewBox="0 0 1668 1160"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="g158" transform="translate(254 -254)">
          <g id="g34" transform="translate(-13.78 3.524)" stroke="#000">
            <path
              id="path10"
              d="m494.57 1006.9c41.429-15.714 140-11.427 191.43-12.857 51.429-1.429 160.48 10.23 201.43 27.143 40.995 16.93 134.78 67.656 151.43 72.857 22.857 7.143 41.429 7.143 80 20 38.572 12.857 25.714 32.857 25.714 32.857l-30-4.286-5.756 52.92s37.185 1.366 41.47 15.652c4.286 14.286 5.715 31.428-2.856 41.428-8.572 10-14.286-1.428-18.572 12.858-4.286 14.285-2.857 28.571-27.143 27.142-24.285-1.428-98.571 0-98.571 0s-15.714-108.57-98.573-105.71c-82.857 2.857-95.714 105.71-95.714 105.71h-500s-5.714-104.28-97.143-105.71c-91.428-1.428-98.571 105.71-98.571 105.71h-65.713l-18.572-38.571c-0.515 0-26.243 0-21.428-17.143 4.651-16.561-4.286-41.428 17.142-41.428 21.429 0 47.143 1.428 47.143 1.428l15.715-44.286-41.429-2.857s34.286-24.285 118.57-32.857c84.286-8.571 157.14-8.571 192.86-31.428 35.714-22.858 137.14-78.572 137.14-78.572z"
              fill="none"
              strokeWidth="5"
            />
            <path
              id="path12"
              d="m28.857 1254h92.857m180 0h517.14m172.86 0h151.43"
              fill="none"
              strokeWidth="2"
            />
            <path
              id="path14"
              d="m364.57 1101.1c15.715-18.572 123.37-81.525 151.43-88.572 29.502-7.41 103-7.142 103-7.142l-7.143 95.714z"
              fill="#f0ffeb"
              strokeWidth="5"
            />
            <path
              id="path16"
              d="m404.57 1071.1v28.571"
              fill="none"
              strokeWidth="2"
            />
            <path
              id="path18"
              d="m644.7 1006.8-4.285 94.328h207.16c-11.307-20.753-46.612-74.906-72.857-88.572-14.285-10-82.878-4.327-130.02-5.756zm167.02 7.164s80 84.286 85.715 87.143c5.714 2.857 115.71 1.428 115.71 1.428s-77.143-47.141-102.86-58.571c-25.715-11.429-90-31.429-98.572-30z"
              fill="#f0ffeb"
              strokeWidth="5"
            />
            <g fill="none">
              <path
                id="path20"
                d="m345.64 1091.7c-14.075 30.968-18.298 71.788-18.298 94.31 0 22.521 4.223 91.493 22.521 105.57m282.93-298.41c-1.408 5.63-4.047 81.903-6.51 106.93-3.67 18.715-4.989 51.219-6.159 87.315 0 22.522 7.038 80.233 12.669 105.57"
                strokeWidth="5"
              />
              <path
                id="path22"
                d="m103.53 1252.1s15.483-85.864 106.98-85.864c91.494 0 109.79 87.271 109.79 87.271m479.99 0s15.483-85.863 106.98-85.863c91.493 0 109.79 87.27 109.79 87.27m-947.31-57.711h63.342"
                strokeWidth="2"
              />
              <path
                id="path24"
                d="m779.18 1000.2c18.299 12.668 56.304 50.673 92.9 104.16 36.598 53.489 8.447 59.12-18.298 74.603-26.744 15.483-49.266 42.227-67.564 112.61"
                strokeWidth="5"
              />
              <path
                id="path26"
                d="m1112.8 1196h-129.5m-696.76-0.222h544.74m-22.522-150.61v54.896"
                strokeWidth="2"
              />
            </g>
            <g strokeWidth="2">
              <rect
                id="rect28"
                x="558.65"
                y="1144.9"
                width="41.286"
                height="14.541"
                rx="2.933"
                ry="7.379"
                fill="#e6e6e6"
              />
              <rect
                id="rect30"
                x="816.24"
                y="1144.9"
                width="41.286"
                height="14.541"
                rx="2.933"
                ry="7.379"
                fill="#e6e6e6"
              />
              <rect
                id="rect32"
                x="259.53"
                y="1146.3"
                width="18.776"
                height="11.738"
                rx="1.63"
                ry="7.692"
                fill="#ffcb00"
              />
            </g>
          </g>
          <g id="g54" transform="translate(-13.78 15.524)" stroke="#000">
            <path
              id="path36"
              d="m62.767 812.59-11.712 16.12-18.95-6.157v-19.925l18.95-6.158z"
              fill="none"
              strokeWidth="5"
            />
            <path
              id="path38"
              d="m31.742 745.02 315.3-111.2m-316.71 254.77 315.3 115.42"
              fill="none"
              strokeWidth="2"
            />
            <path
              id="path40"
              d="m341.41 632.78 140.76 38.005s-8.446 49.222-8.446 71.963v147.62c0 30.967 8.445 78.825 8.445 78.825l-140.76 33.782s-17.242-61.902-17.242-92.901l2.111-185.8c-1.408-30.967 15.132-91.493 15.132-91.493z"
              fill="#f0ffeb"
              strokeWidth="5"
            />
            <g fill="none">
              <path
                id="path42"
                d="m482.17 670.79s94.309 5.63 152.02 5.63c106.98 0 201.29-5.63 201.29-5.63m-1.408 297s-77.418-5.63-199.88-5.63c-68.972 0-152.02 7.038-152.02 7.038"
                strokeWidth="5"
              />
              <rect
                id="rect44"
                x="528.62"
                y="729.2"
                width="106.98"
                height="181.58"
                rx="31.19"
                ry="34.436"
                strokeWidth="2"
              />
              <path
                id="path46"
                d="m345.78 632.78h-294.19l-14.076 102.75-7.038 11.26v142.17l7.038 14.076 15.483 101.35h288.56m491.11-333.6s-12.668 47.858-12.668 73.195v146.39c0 25.336 12.668 77.417 12.668 77.417l205.51 38.005h108.38s14.076-81.64 14.076-115.42v-147.8c0-38.005-14.076-109.79-14.076-109.79h-108.38z"
                strokeWidth="5"
              />
            </g>
            <path
              id="path48"
              d="m843.92 689.09s-8.445 40.82-8.445 56.303v144.98c0 19.706 7.038 57.711 7.038 57.711s94.308 26.744 123.87 26.744h42.228v-312.49h-47.859c-25.336 0-116.83 26.745-116.83 26.745z"
              fill="#f0ffeb"
              strokeWidth="5"
            />
            <path
              id="path50"
              d="m1038.2 632.78s30.967 40.82 30.967 111.2v146.39c0 64.749-30.967 116.83-30.967 116.83m-713.65-263.22 32.374-32.375v-40.82 112.61m-33.078 81.641 32.374-32.375v-40.82 112.61m648.9-116.83-32.375-32.374v-40.82 112.61"
              fill="none"
              strokeWidth="2"
            />
            <path
              id="path52"
              d="m341.41 632.78s-42.228 78.825-42.228 111.2v146.39c0 40.82 42.228 114.02 42.228 114.02"
              fill="none"
              strokeWidth="2"
            />
          </g>
          <g fill="none" stroke="#000">
            <path
              id="path56"
              d="m-106.79 740.92 1.407-91.493s5.63-23.93-25.337-25.337c-30.967-1.408-26.744 2.815-26.744 2.815l1.408 415.24h28.152c28.152 0 22.521-22.52 22.521-22.52v-95.717c-12.677 0-11.26-9.614-11.26-16.891v-149.2c0.45-18.89 9.853-16.892 9.853-16.892z"
              strokeWidth="5"
            />
            <path
              id="path58"
              d="m-155.99 646.16h49.265m-48.415 374.27h49.266m-50.82-315.37h49.266m-46.451 259.81h49.266"
              strokeWidth="2.2"
            />
            <path
              id="path60"
              d="m-147.1 703.82v260.4m9.853-258.84v260.4"
              strokeWidth="2"
            />
          </g>
          <g id="g88" transform="translate(-13.78 15.524)" stroke="#000">
            <path
              id="path62"
              d="m494.57 641.61c41.429 15.714 140 11.428 191.43 12.856s160.48-10.23 201.43-27.143c40.995-16.93 134.78-67.656 151.43-72.857 22.857-7.143 41.429-7.143 80-20 38.572-12.857 25.714-32.857 25.714-32.857l-30 4.285-5.756-52.92s37.185-1.365 41.47-15.651c4.286-14.286 5.715-31.429-2.856-41.429-8.572-10-14.286 1.429-18.572-12.857-4.286-14.285-2.857-28.571-27.143-27.143-24.285 1.429-98.571 0-98.571 0s-15.714 108.57-98.572 105.72c-82.857-2.857-95.714-105.72-95.714-105.72h-500s-5.714 104.29-97.143 105.72c-91.428 1.428-98.571-105.72-98.571-105.72h-65.714l-18.572 38.572c-0.515 0-26.243 0-21.428 17.143 4.651 16.561-4.286 41.428 17.142 41.428 21.429 0 47.143-1.428 47.143-1.428l15.715 44.285-41.429 2.859s34.286 24.285 118.57 32.857c84.286 8.571 157.14 8.571 192.86 31.428 35.714 22.857 137.14 78.572 137.14 78.572z"
              fill="none"
              strokeWidth="5"
            />
            <path
              id="path64"
              d="m28.857 394.47h92.857m180 0h517.14m172.86 0h151.43"
              fill="none"
              strokeWidth="2"
            />
            <path
              id="path66"
              d="m364.57 547.33c15.715 18.571 123.37 81.524 151.43 88.571 29.502 7.41 103 7.143 103 7.143l-7.143-95.714z"
              fill="#f0ffeb"
              strokeWidth="5"
            />
            <path
              id="path68"
              d="m404.57 577.33v-28.571"
              fill="none"
              strokeWidth="2"
            />
            <path
              id="path70"
              d="m644.7 641.64-4.285-94.328h207.16c-11.307 20.753-46.612 74.906-72.857 88.571-14.285 10-82.878 4.328-130.02 5.757zm167.02-7.165s80-84.285 85.715-87.142c5.714-2.857 115.71-1.429 115.71-1.429s-77.143 47.143-102.86 58.572c-25.715 11.428-90 31.428-98.572 30z"
              fill="#f0ffeb"
              strokeWidth="5"
            />
            <g fill="none">
              <path
                id="path72"
                d="m345.64 556.81c-14.075-30.967-18.298-71.787-18.298-94.309 0-22.521 4.223-91.493 22.521-105.57m282.93 298.41c-1.408-5.63-4.047-81.905-6.51-106.93-3.67-18.714-4.989-51.218-6.159-87.314 0-22.522 7.038-80.233 12.669-105.57"
                strokeWidth="5"
              />
              <path
                id="path74"
                d="m103.53 396.34s15.483 85.864 106.98 85.864c91.494 0 109.79-87.271 109.79-87.271m479.99 0s15.483 85.863 106.98 85.863c91.493 0 109.79-87.27 109.79-87.27m-947.31 57.71h63.342"
                strokeWidth="2"
              />
              <path
                id="path76"
                d="m779.18 648.3c18.299-12.669 56.304-50.674 92.9-104.16 36.598-53.489 8.447-59.12-18.298-74.603-26.744-15.483-49.266-42.228-67.564-112.61"
                strokeWidth="5"
              />
              <path
                id="path78"
                d="m1112.8 452.42h-129.5m-696.76 0.223h544.74m-22.522 150.61v-54.895"
                strokeWidth="2"
              />
            </g>
            <g strokeWidth="2">
              <rect
                id="rect80"
                transform="scale(1 -1)"
                x="558.65"
                y="-503.55"
                width="41.286"
                height="14.541"
                rx="2.933"
                ry="7.379"
                fill="#e6e6e6"
              />
              <rect
                id="rect82"
                transform="scale(1 -1)"
                x="816.24"
                y="-503.55"
                width="41.286"
                height="14.541"
                rx="2.933"
                ry="7.379"
                fill="#e6e6e6"
              />
              <rect
                id="rect84"
                transform="scale(1 -1)"
                x="259.53"
                y="-502.15"
                width="18.776"
                height="11.738"
                rx="1.63"
                ry="7.692"
                fill="#ffcb00"
              />
              <circle
                id="circle86"
                transform="translate(941.34 284)"
                cx="59.119"
                cy="211.28"
                r="16.891"
                fill="#fff"
              />
            </g>
          </g>
          <path
            id="path90"
            d="m-126.58 704.93v260.4"
            fill="none"
            stroke="#000"
            strokeWidth="2"
          />
          <path
            id="path92"
            d="m-153.88 992.49v-26.041h45.043v52.08h-45.043zm0-316.71v-27.448h45.043v54.898h-45.043z"
            fill="#ffffc0"
          />
          <g fill="none" stroke="#000">
            <path
              id="path94"
              d="m-157.4 624.38s-4.223-12.669-18.299-12.669-14.076 8.446-14.076 8.446v423.69s1.408 9.853 14.076 9.853c12.669 0 18.3-9.853 18.3-9.853"
              strokeWidth="5"
            />
            <path
              id="path96"
              d="m-191.18 624.38s-35.19-1.408-35.19 21.114v371.6c0 22.521 36.597 25.336 36.597 25.336"
              strokeWidth="5"
            />
            <g strokeWidth="2">
              <rect
                id="rect98"
                x="-216.51"
                y="648.31"
                width="16.891"
                height="35.19"
                rx="7.742"
                ry="6.284"
              />
              <rect
                id="rect100"
                x="-216.51"
                y="985.58"
                width="16.891"
                height="35.19"
                rx="7.742"
                ry="6.284"
              />
              <path id="path102" d="m-62.939 645.49h30.967v377.24h-30.967z" />
            </g>
            <path
              id="path104"
              d="m1200.9 633.86v73.195h67.565v-83.048l-25.337-14.076zm0 329.38h67.565v78.826l-23.93 14.076-43.635-18.3zm0-270.26v284.33m67.565-283.74v284.33"
              strokeWidth="5"
            />
            <path
              id="path106"
              d="m1216.6 759.51h14.076v147.8h-14.076zm7.631-1.408v-53.488m0 257.37v-53.49m30.375-201.06v256.18"
              strokeWidth="2"
            />
            <path
              id="path108"
              d="m1268.8 624.97s4.223-12.668 18.299-12.668 14.076 8.445 14.076 8.445v423.69s-1.408 9.853-14.076 9.853c-12.669 0-18.299-9.853-18.299-9.853m33.783-419.46s35.19-1.408 35.19 21.114v371.6c0 22.521-36.598 25.337-36.598 25.337"
              strokeWidth="5"
            />
            <g strokeWidth="2">
              <rect
                id="rect110"
                transform="scale(-1 1)"
                x="-1329.9"
                y="648.9"
                width="16.891"
                height="35.19"
                rx="7.742"
                ry="6.284"
              />
              <rect
                id="rect112"
                transform="scale(-1 1)"
                x="-1329.9"
                y="986.17"
                width="16.891"
                height="35.19"
                rx="7.742"
                ry="6.284"
              />
              <path
                id="path114"
                d="m1199.7 632.82 67.565 74.603m-67.565 0.592 67.565-73.195m-67.342 328.16 67.565 74.602m-67.565 0.593 67.565-73.195"
              />
            </g>
          </g>
          <g stroke="#000">
            <g strokeWidth="2">
              <circle
                id="circle116"
                transform="translate(78.489 1074.7)"
                cx="119.65"
                cy="202.84"
                r="76.01"
                fill="#c8c8c8"
              />
              <circle
                id="circle118"
                transform="translate(94.676 1204.9)"
                cx="103.46"
                cy="72.633"
                r="44.339"
                fill="#fff"
              />
              <circle
                id="circle120"
                transform="translate(78.489 187.66)"
                cx="119.65"
                cy="202.84"
                r="76.01"
                fill="#c8c8c8"
              />
              <circle
                id="circle122"
                transform="translate(94.676 317.86)"
                cx="103.46"
                cy="72.633"
                r="44.339"
                fill="#fff"
              />
              <circle
                id="circle124"
                transform="translate(773.02 187.66)"
                cx="119.65"
                cy="202.84"
                r="76.01"
                fill="#c8c8c8"
              />
              <circle
                id="circle126"
                transform="translate(789.21 317.86)"
                cx="103.46"
                cy="72.633"
                r="44.339"
                fill="#fff"
              />
              <circle
                id="circle128"
                transform="translate(773.02 1074.7)"
                cx="119.65"
                cy="202.84"
                r="76.01"
                fill="#c8c8c8"
              />
              <circle
                id="circle130"
                transform="translate(789.21 1204.9)"
                cx="103.46"
                cy="72.633"
                r="44.339"
                fill="#fff"
              />
            </g>
            <path
              id="path132"
              d="m1338.5 829.07h40.82"
              fill="none"
              strokeWidth="5"
            />
            <circle
              id="circle134"
              transform="translate(1441.3 600.31)"
              cx="-59.119"
              cy="229.58"
              r="4.223"
              fill="#3c3c3c"
              strokeWidth="5"
            />
            <g strokeWidth="2">
              <path id="path136" d="m778.06 845.37-38.709-38.709" fill="none" />
              <g id="g146" transform="translate(-13.78 15.524)" fill="#3c3c3c">
                <circle
                  id="circle138"
                  transform="translate(-79.458 449.8)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
                <circle
                  id="circle140"
                  transform="translate(-79.458 569.92)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
                <circle
                  id="circle142"
                  transform="translate(-79.458 690.03)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
                <circle
                  id="circle144"
                  transform="translate(-79.458 810.15)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
              </g>
              <g id="g156" transform="translate(-13.78 17.524)" fill="#3c3c3c">
                <circle
                  id="circle148"
                  transform="translate(1381.6 448.25)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
                <circle
                  id="circle150"
                  transform="translate(1381.6 568.36)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
                <circle
                  id="circle152"
                  transform="translate(1381.6 688.48)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
                <circle
                  id="circle154"
                  transform="translate(1381.6 808.59)"
                  cx="-81.641"
                  cy="188.76"
                  r="4.223"
                />
              </g>
            </g>
          </g>
        </g>
        <g id="layer2" fill="#d00000">
          <circle
            id="p02"
            cx="503.65"
            cy="248.75"
            r="61.935"
            opacity={dmg1 === "02" ? 100 : 0}
          />
          <circle
            id="p03"
            cx="863.41"
            cy="248.75"
            r="61.935"
            opacity={dmg1 === "03" ? 100 : 0}
          />
          <circle
            id="p04"
            cx="1181.5"
            cy="248.75"
            r="61.935"
            opacity={dmg1 === "04" ? 100 : 0}
          />
          <circle
            id="p05"
            cx="1378.4"
            cy="151.16"
            r="61.935"
            opacity={dmg1 === "05" ? 100 : 0}
          />
          <circle
            id="p06"
            cx="1535.1"
            cy="581.37"
            r="61.935"
            opacity={dmg1 === "06" ? 100 : 0}
          />
          <circle
            id="p07"
            cx="1378.4"
            cy="997.9"
            r="61.935"
            opacity={dmg1 === "07" ? 100 : 0}
          />
          <circle
            id="p08"
            cx="1181.5"
            cy="914.24"
            r="61.935"
            opacity={dmg1 === "08" ? 100 : 0}
          />
          <circle
            id="p09"
            transform="scale(1,-1)"
            cx="863.41"
            cy="-914.24"
            r="61.935"
            opacity={dmg1 === "09" ? 100 : 0}
          />
          <circle
            id="p10"
            cx="503.65"
            cy="914.24"
            r="61.935"
            opacity={dmg1 === "10" ? 100 : 0}
          />
          <circle
            id="p11"
            cx="297.77"
            cy="997.9"
            r="61.935"
            opacity={dmg1 === "11" ? 100 : 0}
          />
          <circle
            id="p12"
            cx="93.269"
            cy="581.37"
            r="61.935"
            opacity={dmg1 === "12" ? 100 : 0}
          />
          <circle
            id="p25"
            cx="424.31"
            cy="581.37"
            r="61.935"
            opacity={dmg1 === "25" ? 100 : 0}
          />
          <circle
            id="p27"
            cx="972.84"
            cy="581.37"
            r="61.935"
            opacity={dmg1 === "27" ? 100 : 0}
          />
          <circle
            id="p01"
            cx="297.77"
            cy="151.16"
            r="61.935"
            opacity={dmg1 === "01" ? 100 : 0}
          />
          <circle
            id="p26"
            cx="1339.4"
            cy="581.37"
            r="61.935"
            opacity={dmg1 === "26" ? 100 : 0}
          />
        </g>
        <g id="g4994" fill="#ffef00">
          <circle
            id="s02"
            cx="503.65"
            cy="248.75"
            r="61.935"
            opacity={dmg2 === "02" ? 100 : 0}
          />
          <circle
            id="s03"
            cx="863.41"
            cy="248.75"
            r="61.935"
            opacity={dmg2 === "03" ? 100 : 0}
          />
          <circle
            id="s04"
            cx="1181.5"
            cy="248.75"
            r="61.935"
            opacity={dmg2 === "04" ? 100 : 0}
          />
          <circle
            id="s05"
            cx="1378.4"
            cy="151.16"
            r="61.935"
            opacity={dmg2 === "05" ? 100 : 0}
          />
          <circle
            id="s06"
            cx="1535.1"
            cy="581.37"
            r="61.935"
            opacity={dmg2 === "06" ? 100 : 0}
          />
          <circle
            id="s07"
            cx="1378.4"
            cy="997.9"
            r="61.935"
            opacity={dmg2 === "07" ? 100 : 0}
          />
          <circle
            id="s08"
            cx="1181.5"
            cy="914.24"
            r="61.935"
            opacity={dmg2 === "08" ? 100 : 0}
          />
          <circle
            id="s09"
            transform="scale(1,-1)"
            cx="863.41"
            cy="-914.24"
            r="61.935"
            opacity={dmg2 === "09" ? 100 : 0}
          />
          <circle
            id="s10"
            cx="503.65"
            cy="914.24"
            r="61.935"
            opacity={dmg2 === "10" ? 100 : 0}
          />
          <circle
            id="s11"
            cx="297.77"
            cy="997.9"
            r="61.935"
            opacity={dmg2 === "11" ? 100 : 0}
          />
          <circle
            id="s12"
            cx="93.269"
            cy="581.37"
            r="61.935"
            opacity={dmg2 === "12" ? 100 : 0}
          />
          <circle
            id="s25"
            cx="424.31"
            cy="581.37"
            r="61.935"
            opacity={dmg2 === "25" ? 100 : 0}
          />
          <circle
            id="s27"
            cx="972.84"
            cy="581.37"
            r="61.935"
            opacity={dmg2 === "27" ? 100 : 0}
          />
          <circle
            id="s01"
            cx="297.77"
            cy="151.16"
            r="61.935"
            opacity={dmg2 === "01" ? 100 : 0}
          />
          <circle
            id="s26"
            cx="1339.4"
            cy="581.37"
            r="61.935"
            opacity={dmg2 === "26" ? 100 : 0}
          />
          {
            //  <text
            //   id='p15'
            //   opacity='0'
            //   x='382.62802'
            //   y='1034.3463'
            //   fill='#fd0000'
            //   fontFamily='sans-serif'
            //   fontSize='1696.9px'
            //   letterSpacing='0px'
            //   strokeWidth='17.676'
            //   wordSpacing='0px'
            //   style='line-height:5.25'>
            //   x
            // </text>
          }
        </g>
      </svg>
    </div>
  );
};

export default Car;