import { ImageResponse } from "next/og";
import { type NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;
  const title = searchParams.get("title") || "Belgian Bitcoin Embassy";
  const type = searchParams.get("type") || "default";
  const subtitle =
    searchParams.get("subtitle") ||
    (type === "blog"
      ? "Blog"
      : type === "event"
        ? "Event"
        : "Bitcoin Meetups & Education in Belgium");

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          background: "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)",
          fontFamily: "system-ui, sans-serif",
          padding: "60px 80px",
        }}
      >
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            height: "4px",
            background: "#F7931A",
          }}
        />

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: "24px",
            maxWidth: "1000px",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "16px",
              marginBottom: "8px",
            }}
          >
            <div
              style={{
                width: "48px",
                height: "48px",
                borderRadius: "12px",
                background: "#F7931A",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontSize: "28px",
                fontWeight: 700,
                color: "#fff",
              }}
            >
              B
            </div>
            <span
              style={{
                fontSize: "14px",
                fontWeight: 600,
                color: "#F7931A",
                letterSpacing: "4px",
                textTransform: "uppercase",
              }}
            >
              {subtitle}
            </span>
          </div>

          <h1
            style={{
              fontSize: title.length > 60 ? "40px" : title.length > 40 ? "48px" : "56px",
              fontWeight: 800,
              color: "#ffffff",
              textAlign: "center",
              lineHeight: 1.15,
              margin: 0,
              letterSpacing: "-1px",
            }}
          >
            {title}
          </h1>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "8px",
              marginTop: "16px",
            }}
          >
            <span
              style={{
                fontSize: "16px",
                color: "#666",
                fontWeight: 500,
              }}
            >
              belgianbitcoinembassy.org
            </span>
          </div>
        </div>

        <div
          style={{
            position: "absolute",
            bottom: "40px",
            display: "flex",
            alignItems: "center",
            gap: "8px",
          }}
        >
          <span
            style={{
              fontSize: "13px",
              fontWeight: 500,
              color: "#F7931A",
              letterSpacing: "4px",
              textTransform: "uppercase",
            }}
          >
            No hype, just signal
          </span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}