import { useId } from "react";
import type { IconFC } from "./types.js";

/**
 * @internal
 */
export const AccentFailIcon: IconFC = (props) => {
  const linearGradientId = useId();
  const clipPathId = useId();
  return (
    <svg
      fill="none"
      height={props.size}
      role="presentation"
      viewBox="0 0 109 109"
      width={props.size}
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath={`url(#${clipPathId})`}>
        <path
          d="M54.5 109C84.5995 109 109 84.5995 109 54.5C109 24.4005 84.5995 0 54.5 0C24.4005 0 0 24.4005 0 54.5C0 84.5995 24.4005 109 54.5 109Z"
          fill="#4BABFF"
        />
        <path
          d="M55 96C77.6437 96 96 77.6437 96 55C96 32.3563 77.6437 14 55 14C32.3563 14 14 32.3563 14 55C14 77.6437 32.3563 96 55 96Z"
          fill="#1C85FF"
        />
        <path
          d="M73.2352 69.389C73.7459 69.8997 74.0329 70.5924 74.0329 71.3147C74.0329 72.037 73.7459 72.7298 73.2352 73.2405C72.7244 73.7513 72.0317 74.0382 71.3094 74.0382C70.5871 74.0382 69.8944 73.7513 69.3836 73.2405L54.9992 58.8515L40.6102 73.236C40.0994 73.7467 39.4067 74.0337 38.6844 74.0337C37.9621 74.0337 37.2694 73.7467 36.7586 73.236C36.2479 72.7252 35.9609 72.0325 35.9609 71.3102C35.9609 70.5879 36.2479 69.8952 36.7586 69.3844L51.1476 55L36.7632 40.611C36.2524 40.1002 35.9655 39.4075 35.9655 38.6852C35.9655 37.9629 36.2524 37.2702 36.7632 36.7594C37.2739 36.2487 37.9666 35.9617 38.6889 35.9617C39.4112 35.9617 40.104 36.2487 40.6147 36.7594L54.9992 51.1484L69.3881 36.7572C69.8989 36.2464 70.5916 35.9595 71.3139 35.9595C72.0362 35.9595 72.729 36.2464 73.2397 36.7572C73.7505 37.2679 74.0374 37.9606 74.0374 38.6829C74.0374 39.4052 73.7505 40.098 73.2397 40.6087L58.8507 55L73.2352 69.389Z"
          fill={`url(#${linearGradientId})`}
        />
      </g>
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          id={linearGradientId}
          x1="54.9992"
          x2="54.9992"
          y1="35.9595"
          y2="74.0382"
        >
          <stop stopColor="white" />
          <stop offset="1" stopColor="#90CBFF" />
        </linearGradient>
        <clipPath id={clipPathId}>
          <rect fill="white" height="109" width="109" />
        </clipPath>
      </defs>
    </svg>
  );
};