import { motion } from "framer-motion";
import { forwardRef } from "react";

export const Shield2 = forwardRef((props: any, ref) => {
  const { shape } = props;
  const GradientType =
    shape?.gradient?.type === "radialGradient"
      ? "radialGradient"
      : "linearGradient";
  return (
    <svg
      ref={ref as any}
      width={props?.width ?? 303}
      height={props?.height ?? 303}
      viewBox="0 0 255 323"
      fill="none"
      id={props?.id ?? undefined}
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        {shape?.image?.enabled && shape?.image?.urls?.length > 0 && (
          <pattern
            id={`shape-gradient-${shape?.component ?? "null"}`}
            x="0"
            y="0"
            patternUnits="userSpaceOnUse"
            width={303}
            height={303}
          >
            <image
              href={shape?.image?.urls[0]}
              width="100%"
              height="100%"
              preserveAspectRatio="xMidYMid slice"
            />
          </pattern>
        )}
        <GradientType
          id={`shape-gradient-${shape?.component ?? "null"}`}
          gradientTransform={`rotate(${shape?.gradient?.angle ?? "90"})`}
        >
          {shape?.gradient?.enabled ? (
            <>
              {shape?.gradient?.colours?.map((color: any, c: number) => (
                <stop
                  key={c}
                  offset={`${color.left}%`}
                  stopColor={color.value}
                />
              ))}
            </>
          ) : (
            <stop offset="0%" stopColor={shape?.colour ?? "#fff"} />
          )}
        </GradientType>
      </defs>
      <defs>
        <mask id={`mask-${shape?.component ?? "null"}`} fill="black">
          <rect width="100%" height="100%" fill="white" />
          <g
            style={{
              transformOrigin: "center",
            }}
            opacity={100}
          >
            {shape?.transparency && props?.children && props.children}
          </g>
        </mask>
      </defs>
      <g fill={`url(#${`shape-gradient-${shape?.component ?? "null"}`})`}>
        <g mask={`url(#${`mask-${shape?.component ?? "null"}`})`}>
          <motion.path
            d="M120.162 320.803a22.185 22.185 0 007.521 2.196 15.04 15.04 0 007.339-1.83c12.291-6.588 119.977-66.067 119.977-127.558V80.308a15.939 15.939 0 00-4.625-11.36 16.02 16.02 0 00-11.335-4.744c-54.852 0-98.33-57.649-98.881-58.198a16.5 16.5 0 00-5.7-4.429 16.542 16.542 0 00-19.8 4.429c-.367.549-43.845 58.198-98.697 58.198a16.018 16.018 0 00-11.335 4.744 15.97 15.97 0 00-4.625 11.36V193.41c0 61.509 107.87 120.805 120.161 127.394z"
            animate={{
              scaleX:
                shape?.border?.width > 0 ? 1 - shape?.border?.width / 350 : 1,
              scaleY:
                shape?.border?.width > 0 ? 1 - shape?.border?.width / 350 : 1,
              rotate: shape?.position?.angle ?? 0,
            }}
            stroke={shape?.border?.colour}
            strokeLinejoin="round"
            strokeWidth={shape?.border?.width}
            onClick={props?.onClick ? props.onClick : () => {}}
          />
        </g>
      </g>
      {!shape?.transparency && props?.children && props.children}
    </svg>
  );
});
