import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url);
    const hasTitle = searchParams.has("title");
    const title = hasTitle
      ? searchParams.get("title")?.slice(0, 100)
      : "Hello World!";

    return new ImageResponse(
      (
        <div
          style={{
            fontSize: 40,
            color: "#373737",
            background: "#ffffff",
            width: "100%",
            height: "100%",
            padding: "50px 200px",
            display: "flex",

            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div
            tw="border-2 border-solid border-[#373737] p-2"
            style={{
              boxShadow: "11px 4px 3px 4px rgba(55,55,55,0.8)",
              display: "flex",
              gap: "10px",
            }}
          >
            <span tw="text-[100px]">{title}</span>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  } catch (e) {
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}