type InitialHeroSvgProps = {
  image: string;
  mode: "light" | "dark";
};

function InitialHeroSvg({ image, mode = "light" }: InitialHeroSvgProps) {
  const strokeColor = mode === "light" ? "#FCCBA9" : "#22232c";
  const fillColor = mode === "light" ? "#FCCBA9" : "#22232c";

  return (
    <svg
      fill="none"
      height="100%"
      style={{
        display: "block",
        maxHeight: "100%",
        maxWidth: "100%",
      }}
      viewBox="0 0 463 547"
      width="100%"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <circle cx="226.144" cy="318.144" r="225.644" stroke={strokeColor} />
      <circle cx="236.387" cy="320.438" fill={fillColor} r="226.144" />
      <mask
        height="547"
        id="mask0_1130_3888"
        maskUnits="userSpaceOnUse"
        style={{ maskType: "alpha" }}
        width="453"
        x="10"
        y="0"
      >
        <path
          d="M462.531 320.438C462.531 445.334 361.283 546.582 236.387 546.582C111.491 546.582 10.2422 445.334 10.2422 320.438C10.2422 195.542 111.491 0 236.387 0C361.283 0 462.531 195.542 462.531 320.438Z"
          fill="#C6ABFF"
        />
      </mask>
      <g mask="url(#mask0_1130_3888)">
        <rect
          fill="url(#pattern0_1130_3888)"
          height="529"
          width="546"
          x="-37"
          y="18"
        />
      </g>
      <defs>
        <pattern
          height="1"
          id="pattern0_1130_3888"
          patternContentUnits="objectBoundingBox"
          width="1"
        >
          <use
            transform="matrix(0.001 0 0 0.001 0 -0.0019)"
            xlinkHref="#image0_1130_3888"
          />
        </pattern>
        <image
          height="1000"
          id="image0_1130_3888"
          preserveAspectRatio="xMidYMid slice"
          width="1000"
          xlinkHref={image}
        />
      </defs>
    </svg>
  );
}

export default InitialHeroSvg;