import { ImageResponse } from "next/og";
import { getPost, POSTS } from "../posts";

export const alt = "Tia Blog";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

// Pre-render an OG image for every known post.
export function generateStaticParams() {
  return POSTS.map((p) => ({ slug: p.slug }));
}

export default async function BlogOgImage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = getPost(slug);

  const title = post?.title ?? "The Tia Blog";
  const category = post?.category ?? "Journal";
  const emoji = post?.emoji ?? "🌸";

  return new ImageResponse(
    (
      <div
        style={{
          background:
            "linear-gradient(135deg, #fdf2f2 0%, #fef3c7 50%, #fdf2f2 100%)",
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          fontFamily: "sans-serif",
          padding: 80,
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <span style={{ fontSize: 40 }}>🌸</span>
          <span style={{ fontSize: 34, fontWeight: 800, color: "#111827" }}>
            Tia
          </span>
          <span
            style={{
              marginLeft: 12,
              fontSize: 22,
              fontWeight: 600,
              color: "#f43f5e",
              background: "#ffe4e6",
              padding: "6px 18px",
              borderRadius: 999,
            }}
          >
            {category}
          </span>
        </div>

        <div style={{ display: "flex", flexDirection: "column" }}>
          <div style={{ fontSize: 64, marginBottom: 16 }}>{emoji}</div>
          <div
            style={{
              fontSize: 56,
              fontWeight: 800,
              color: "#111827",
              lineHeight: 1.15,
              maxWidth: 1000,
            }}
          >
            {title}
          </div>
        </div>

        <div style={{ fontSize: 24, color: "#6b7280" }}>
          tia.manohargupta.com/blog
        </div>
      </div>
    ),
    { ...size }
  );
}
