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

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const baseUrl = new URL(request.url).origin;

  return new ImageResponse(
    (
      <div style={{ display: "flex", width: 1200, height: 630, position: "relative", backgroundColor: "#ffffff" }}>
        <div style={{ display: "flex", position: "absolute", top: 0, left: 0, width: 1200, height: 630, overflow: "hidden" }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={`${baseUrl}/background/abstract_light/abstract_light_1.png`} width={1200} height={630} alt="" style={{ display: "flex", position: "absolute", top: 0, left: 0, width: 1200, height: 630, objectFit: "cover" }} />
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={`${baseUrl}/pattern/plan.png`} width={1200} height={630} alt="" style={{ display: "flex", position: "absolute", top: 0, left: 0, width: 1200, height: 630, opacity: 1, objectFit: "fill" }} />
        </div>
        <div style={{ position: "absolute", top: 516, left: 86, width: 60, height: 60, boxSizing: "border-box", display: "flex", borderTopLeftRadius: "0px", borderTopRightRadius: "0px", borderBottomLeftRadius: "0px", borderBottomRightRadius: "0px", overflow: "hidden", zIndex: 10 }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/logo/logo-black.svg" width={60} height={60} alt="" style={{ position: "absolute", top: 0, left: 0, width: 60, height: 60, objectFit: "cover" }} />
        </div>
        <div style={{ position: "absolute", top: 94, left: 83, width: 543, height: "auto", boxSizing: "border-box", display: "flex", color: "rgba(0, 0, 0, 1)", fontFamily: "Montserrat", fontWeight: 600, fontStyle: "normal", fontSize: 70, lineHeight: 1.1, letterSpacing: -6, textAlign: "left", flexDirection: "column", alignItems: "flex-start", justifyContent: "flex-start", marginTop: 0, marginBottom: 0, wordBreak: "break-word", whiteSpace: "pre-wrap", zIndex: 10 }}>Every share, perfectly crafted</div>
        <div style={{ position: "absolute", top: 519, left: 165, width: 391, height: "auto", boxSizing: "border-box", display: "flex", color: "rgba(0, 0, 0, 1)", fontFamily: "Montserrat", fontWeight: 600, fontStyle: "normal", fontSize: 50, lineHeight: 1, letterSpacing: -2, textAlign: "left", flexDirection: "column", alignItems: "flex-start", justifyContent: "flex-start", marginTop: 0, marginBottom: 0, wordBreak: "break-word", whiteSpace: "pre-wrap", zIndex: 10 }}>opengraphh</div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
    {
      name: "Montserrat",
      data: await fetch(`${baseUrl}/fonts/montserrat-600-normal.ttf`)
        .then((res) => res.arrayBuffer()),
      weight: 600,
      style: "normal",
    }
      ],
    }
  );
}