import { ImageResponse } from "next/og";
import { siteConfig } from "@/lib/constants";

export const runtime = "edge";
export const alt = `${siteConfig.name} — online Markdown editor with live preview`;
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          padding: "80px",
          background:
            "radial-gradient(60% 60% at 20% 20%, #1e293b 0%, #0b1220 60%, #050913 100%)",
          color: "white",
          fontFamily:
            "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 16,
            fontSize: 28,
            color: "rgba(255,255,255,0.8)",
          }}
        >
          <div
            style={{
              width: 56,
              height: 40,
              borderRadius: 8,
              background: "white",
              color: "#0b1220",
              fontWeight: 700,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            M↓
          </div>
          <span>{siteConfig.domain}</span>
        </div>

        <div
          style={{
            marginTop: 60,
            fontSize: 78,
            fontWeight: 700,
            lineHeight: 1.05,
            letterSpacing: "-0.02em",
            display: "flex",
            flexDirection: "column",
          }}
        >
          <span>Write Markdown.</span>
          <span style={{ color: "#60a5fa" }}>See it live.</span>
        </div>

        <div
          style={{
            marginTop: 32,
            fontSize: 32,
            color: "rgba(255,255,255,0.7)",
            maxWidth: 900,
            lineHeight: 1.4,
            display: "flex",
          }}
        >
          A free online Markdown editor with live preview, syntax highlighting, and one-click
          export to HTML or PDF.
        </div>

        <div
          style={{
            marginTop: "auto",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            fontSize: 24,
            color: "rgba(255,255,255,0.6)",
          }}
        >
          <span>Open source · MIT licensed</span>
          <span>Next.js · Tailwind CSS · shadcn/ui</span>
        </div>
      </div>
    ),
    { ...size },
  );
}