import { ImageResponse } from "next/og";
import { site } from "@/lib/content";
import { buildSpiral } from "@/lib/spiral";

export const alt = `${site.brand.name} — ${site.brand.tagline}`;
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function OpenGraphImage() {
  const { squares, path, bbox } = buildSpiral(8);
  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        background: "#f5eee4",
        color: "#1d3047",
        padding: 80,
        fontFamily: "Georgia, serif",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
        <div style={{ fontSize: 88, lineHeight: 1 }}>{site.brand.name}</div>
        <div
          style={{
            fontSize: 22,
            letterSpacing: 6,
            marginTop: 24,
            color: "#3a4652",
            fontFamily: "sans-serif",
          }}
        >
          {site.brand.tagline}
        </div>
        <div
          style={{
            fontSize: 30,
            marginTop: 48,
            color: "#3a4652",
            fontFamily: "sans-serif",
            maxWidth: 620,
          }}
        >
          {site.seo.defaultDescription}
        </div>
      </div>
      <svg
        width="400"
        height="247"
        viewBox={`${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h}`}
        fill="none"
        stroke="#c7a075"
        strokeWidth="0.25"
      >
        {squares.map((s, i) => (
          <rect key={i} x={s.x} y={s.y} width={s.s} height={s.s} />
        ))}
        <path d={path} strokeWidth="0.4" />
      </svg>
    </div>,
    size,
  );
}