import { ImageResponse } from "next/og";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export const alt = "ksan.dev — Full-stack engineering, end to end";

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          background: "#1c0a3d",
          backgroundImage:
            "radial-gradient(circle at 50% 34%, #7c4dd6 0%, #5a2ca6 34%, #2e1257 72%, #190836 100%)",
          fontFamily: "monospace",
        }}
      >
        {/* Kd monogram */}
        <svg
          width={300}
          height={300}
          viewBox="0 0 135.46666 135.46667"
          xmlns="http://www.w3.org/2000/svg"
        >
          {/* K stem */}
          <rect
            x={10.583333}
            y={8.20364}
            width={13.804729}
            height={118.32624}
            fill="#F5F7FF"
          />
          {/* d ascender */}
          <rect
            x={112.60719}
            y={8.2020836}
            width={13.804729}
            height={118.32624}
            fill="#F5F7FF"
          />
          {/* K arms */}
          <path
            fill="#A78BFA"
            d="M 24.392675,67.364089 66.876115,126.5268 H 80.680844 L 38.057204,67.366755 80.677942,8.2059598 66.876115,8.2020832 Z"
          />
          {/* d bowl */}
          <path
            fill="#A78BFA"
            d="M 112.28492,126.5237 98.48174,126.5257 71.437499,88.862363 98.48174,51.458843 h 13.80472 L 85.153597,88.860364 Z"
          />
        </svg>

        <div
          style={{
            marginTop: 36,
            fontSize: 46,
            fontWeight: 600,
            color: "rgba(255,255,255,0.95)",
            letterSpacing: "0.04em",
          }}
        >
          www.ksan.dev
        </div>
      </div>
    ),
    { ...size },
  );
}