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

const ErrorIcon = ({
  stroke,
  fill,
  testID,
  width,
  height,
}: IllustrationSvgProps) => {
  return (
    <BaseSvg width={width} height={height} testID={testID}>
      <Defs>
        <ClipPath id="clip0_19647_1720">
          <Rect width={width} height={height} fill="white" />
        </ClipPath>
      </Defs>
      <Rect
        y="11.3684"
        width="60.6316"
        height="60.6316"
        rx="20"
        fill={fill}
        stroke="transparent"
      />
      <Rect
        x="13"
        y="2"
        width="56.6316"
        height="56.6316"
        rx="18"
        stroke={stroke}
        fill="transparent"
        strokeWidth="4"
      />
      <Rect
        x="38.8"
        y="15.8"
        width="4.4"
        height="21.4"
        rx="1.2"
        fill={stroke}
        stroke={stroke}
        strokeWidth="0.4"
      />
      <Rect
        x="38.8"
        y="40.8"
        width="4.4"
        height="4.4"
        rx="1.2"
        fill={stroke}
        stroke={stroke}
        strokeWidth="0.4"
      />
    </BaseSvg>
  );
};

export default ErrorIcon;