import React from 'react';
import { Path, Rect, ClipPath, Defs, G } from 'react-native-svg';
import type { IllustrationSvgProps } from '../types';
import BaseSvg from '../BaseSvg';

const Confetti = ({
  stroke,
  fill,
  testID,
  width,
  height,
}: IllustrationSvgProps) => {
  return (
    <BaseSvg width={width} height={height} testID={testID}>
      <Defs>
        <ClipPath id="clip0_19647_1699">
          <Rect
            width={width}
            height={height}
            fill="white"
            transform="translate(0.100098)"
          />
        </ClipPath>
      </Defs>
      <G clipPath="url(#clip0_19647_1699)">
        <Rect
          x="0.100098"
          y="11.3684"
          width="60.6316"
          height="60.6316"
          rx="20"
          fill={fill}
        />
        <Rect
          x="13.4685"
          y="2"
          width="56.6316"
          height="56.6316"
          rx="18"
          stroke={stroke}
          strokeWidth="4"
          fill="transparent"
        />
        <Path
          d="M37.2714 23.8504L37.2714 23.8504L37.2699 23.8489C36.7659 23.3552 36.0534 23.1375 35.3412 23.3024C34.6474 23.458 34.0906 23.965 33.8538 24.634L33.8534 24.6351L28.0143 41.4536L28.014 41.4544C27.7561 42.2073 27.9423 43.0243 28.5095 43.5915L28.6509 43.4501L28.5095 43.5915C28.9011 43.9831 29.4275 44.2005 29.9662 44.2005C30.1958 44.2005 30.4216 44.1587 30.6425 44.0884L30.7818 44.0441V44.0309L47.4658 38.2476L47.467 38.2472C48.1359 38.0105 48.6428 37.4538 48.7985 36.7601C48.9632 36.0588 48.7562 35.3352 48.2504 34.8294L48.1089 34.9708L48.2504 34.8294L37.2714 23.8504ZM30.2858 41.8149L33.2962 33.1643L38.9363 38.8044L30.2858 41.8149ZM46.4171 36.2111L41.3149 37.9868L34.1227 30.7856L35.8895 25.6835L46.4171 36.2111Z"
          fill={stroke}
          stroke={stroke}
          strokeWidth="0.4"
        />
        <Path
          d="M43.5303 23.2622L43.5303 23.2623L42.3083 24.483C42.3083 24.483 42.3083 24.483 42.3083 24.4831C42.0872 24.7041 41.7966 24.8144 41.507 24.8144C41.2171 24.8144 40.9277 24.704 40.7068 24.4831C40.2638 24.0401 40.2635 23.3234 40.707 22.8813L41.9287 21.6608C41.9287 21.6608 41.9287 21.6607 41.9288 21.6607C43.03 20.5584 43.2426 18.8537 42.4463 17.5132L43.5303 23.2622ZM43.5303 23.2622C45.365 21.4275 45.7215 18.586 44.3933 16.3537L44.3932 16.3535M43.5303 23.2622L44.3932 16.3535M44.3932 16.3535C44.0734 15.8173 43.3796 15.6386 42.8401 15.9599L44.3932 16.3535ZM42.8401 15.96C42.3018 16.2801 42.1265 16.9754 42.4462 17.5131L42.8401 15.96Z"
          fill={stroke}
          stroke={stroke}
          strokeWidth="0.4"
        />
        <Path
          d="M55.7471 27.7085L55.7469 27.7084C53.5124 26.3791 50.6732 26.7343 48.8384 28.5715C48.8384 28.5715 48.8384 28.5715 48.8384 28.5715L47.6177 29.7934C47.6176 29.7934 47.6176 29.7934 47.6176 29.7934C47.6176 29.7935 47.6176 29.7935 47.6176 29.7935C47.1748 30.2364 47.1744 30.9529 47.6177 31.395C47.8387 31.6161 48.1294 31.7264 48.419 31.7264C48.7087 31.7264 48.9994 31.6161 49.2204 31.395L49.2205 31.3949L50.4411 30.1731C51.5448 29.0705 53.2505 28.8581 54.5886 29.6554L54.5891 29.6557C55.1289 29.9751 55.823 29.7989 56.142 29.2616L56.1423 29.261C56.4591 28.7236 56.2841 28.0288 55.7471 27.7085Z"
          fill={stroke}
          stroke={stroke}
          strokeWidth="0.4"
        />
        <Path
          d="M44.1614 27.9388L44.1616 27.939C44.3826 28.1601 44.6733 28.2704 44.963 28.2704C45.2526 28.2704 45.5433 28.1601 45.7643 27.939C45.7643 27.939 45.7643 27.939 45.7643 27.939L51.2223 22.481C51.6654 22.0379 51.6654 21.3225 51.2223 20.8794C50.7792 20.4363 50.0638 20.4363 49.6207 20.8794L44.163 26.3372L44.3041 26.4788L44.1627 26.3374L44.1628 26.3373C43.7195 26.7794 43.7199 27.4959 44.1614 27.9388Z"
          fill={stroke}
          stroke={stroke}
          strokeWidth="0.4"
        />
        <Path
          d="M51.6867 32.7765C51.6867 33.1416 51.8257 33.43 52.0454 33.6252C52.2614 33.8171 52.5437 33.9087 52.8195 33.9087C53.0953 33.9087 53.3776 33.8171 53.5936 33.6252C53.8133 33.43 53.9523 33.1416 53.9523 32.7765C53.9523 32.4112 53.8134 32.1226 53.5937 31.9272C53.3777 31.7352 53.0954 31.6434 52.8195 31.6434C52.5437 31.6434 52.2613 31.7352 52.0453 31.9272C51.8256 32.1226 51.6867 32.4112 51.6867 32.7765Z"
          fill={stroke}
          stroke={stroke}
          strokeWidth="0.4"
        />
        <Path
          d="M38.1892 19.2869C38.1892 19.6519 38.3281 19.9404 38.5478 20.1356C38.7638 20.3275 39.0462 20.4191 39.322 20.4191C39.5977 20.4191 39.8801 20.3275 40.0961 20.1356C40.3158 19.9404 40.4548 19.6519 40.4548 19.2869C40.4548 18.9216 40.3158 18.6329 40.0962 18.4376C39.8802 18.2455 39.5978 18.1538 39.322 18.1538C39.0461 18.1538 38.7638 18.2455 38.5478 18.4376C38.3281 18.6329 38.1892 18.9216 38.1892 19.2869Z"
          fill={stroke}
          stroke={stroke}
          strokeWidth="0.4"
        />
      </G>
    </BaseSvg>
  );
};

export default Confetti;