interface MascotSvgProps {
  size: number;
}

const GEMINI_STAR_PATH =
  "M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z";

export function GeminiMascot({ size }: MascotSvgProps) {
  return (
    <div
      style={{
        position: "relative",
        width: size,
        height: size,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <svg
        className="glow-el"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        style={{
          width: size,
          height: size,
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%) scale(1.6)",
        }}
      >
        <path d={GEMINI_STAR_PATH} fill="#3186FF" />
      </svg>
      <div className="particles">
        <div className="particle" />
        <div className="particle" />
        <div className="particle" />
        <div className="particle" />
        <div className="particle" />
        <div className="particle" />
      </div>
      <div className="star-wrapper">
        <svg
          className="star-svg"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
          width={size * 0.7}
          height={size * 0.7}
        >
          <path d={GEMINI_STAR_PATH} fill="#3186FF" />
          <path d={GEMINI_STAR_PATH} fill="url(#gm0)" />
          <path d={GEMINI_STAR_PATH} fill="url(#gm1)" />
          <path d={GEMINI_STAR_PATH} fill="url(#gm2)" />
          <defs>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              id="gm0"
              x1="7"
              x2="11"
              y1="15.5"
              y2="12"
            >
              <stop stopColor="#08B962" />
              <stop offset="1" stopColor="#08B962" stopOpacity="0" />
            </linearGradient>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              id="gm1"
              x1="8"
              x2="11.5"
              y1="5.5"
              y2="11"
            >
              <stop stopColor="#F94543" />
              <stop offset="1" stopColor="#F94543" stopOpacity="0" />
            </linearGradient>
            <linearGradient
              gradientUnits="userSpaceOnUse"
              id="gm2"
              x1="3.5"
              x2="17.5"
              y1="13.5"
              y2="12"
            >
              <stop stopColor="#FABC12" />
              <stop offset=".46" stopColor="#FABC12" stopOpacity="0" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  );
}
