import { ImageResponse } from "next/og";

export const runtime = "edge";
export const alt = "Victor Buto — Research & Sensemaking";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "#F9F9F7",
          fontFamily: "Georgia, serif",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: "0",
          }}
        >
          <span
            style={{
              fontSize: "120px",
              fontWeight: 400,
              color: "#050505",
              lineHeight: 1.05,
            }}
          >
            Victor
          </span>
          <span
            style={{
              fontSize: "120px",
              fontWeight: 700,
              color: "#7a1b1b",
              lineHeight: 1.05,
            }}
          >
            Buto
          </span>
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "16px",
            marginTop: "32px",
          }}
        >
          <div style={{ width: "40px", height: "1px", backgroundColor: "#7a1b1b" }} />
          <span
            style={{
              fontSize: "22px",
              fontWeight: 400,
              color: "#7a1b1b",
              letterSpacing: "0.15em",
              textTransform: "uppercase",
            }}
          >
            Research & Sensemaking
          </span>
          <div style={{ width: "40px", height: "1px", backgroundColor: "#7a1b1b" }} />
        </div>
      </div>
    ),
    { ...size }
  );
}