/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
import { useIcon } from 'hooks';
import React, { useMemo } from 'react';
import Svg, { Path, Circle, G, Defs, ClipPath, Rect } from 'react-native-svg';
import { IconProps } from '../types';

export const BellAlert: React.FC<IconProps> = ({ colorVariant = 'white', ...props }) => {
  const { getIconColor } = useIcon();
  const color = useMemo(() => getIconColor(colorVariant), [getIconColor, colorVariant]);

  return (
    <Svg width="18" height="19" viewBox="0 0 18 19" fill="none" {...props}>
      <G clipPath="url(#clip0_4559_54982)">
        <Path
          d="M8.51105 18.5C7.04622 18.5 5.8548 17.3086 5.8548 15.8438C5.8548 15.5505 6.0928 15.3125 6.38605 15.3125C6.6793 15.3125 6.9173 15.5505 6.9173 15.8438C6.9173 16.7229 7.63207 17.4375 8.51105 17.4375C9.39015 17.4375 10.1048 16.7229 10.1048 15.8438C10.1048 15.5505 10.3428 15.3125 10.636 15.3125C10.9293 15.3125 11.1673 15.5505 11.1673 15.8438C11.1673 17.3086 9.97588 18.5 8.51105 18.5Z"
          fill={color}
        />
        <Path
          d="M14.3548 16.375H2.66727C1.98376 16.375 1.42773 15.819 1.42773 15.1355C1.42773 14.7727 1.58571 14.4292 1.86119 14.1933C2.93861 13.2831 3.55273 11.96 3.55273 10.5582V8.58329C3.55273 5.84922 5.77695 3.625 8.51102 3.625C11.2452 3.625 13.4694 5.84922 13.4694 8.58329V10.5582C13.4694 11.96 14.0836 13.2831 15.1539 14.1884C15.4365 14.4292 15.5944 14.7727 15.5944 15.1355C15.5944 15.819 15.0384 16.375 14.3548 16.375ZM8.51102 4.6875C6.36268 4.6875 4.61523 6.43494 4.61523 8.58329V10.5582C4.61523 12.273 3.86375 13.8923 2.55405 14.9994C2.52914 15.0207 2.49023 15.0646 2.49023 15.1355C2.49023 15.2317 2.57104 15.3125 2.66727 15.3125H14.3548C14.4511 15.3125 14.5319 15.2317 14.5319 15.1355C14.5319 15.0646 14.4929 15.0207 14.4696 15.0008C13.1584 13.8923 12.4069 12.273 12.4069 10.5582V8.58329C12.4069 6.43494 10.6595 4.6875 8.51102 4.6875Z"
          fill={color}
        />
      </G>
      <Circle cx="12.2778" cy="5.27767" r="3.83333" fill="#FE6F4A" />
      <Defs>
        <ClipPath id="clip0_4559_54982">
          <Rect width="17" height="17" fill="white" transform="translate(0 1.5)" />
        </ClipPath>
      </Defs>
    </Svg>
  );
};
