portifolio-evandrodevbr/app/cases/[slug]/opengraph-image.tsx

import { notFound } from "next/navigation";
import { ImageResponse } from "next/og";
import {
  OG_CONTENT_TYPE,
  OG_SIZE,
  OgCard,
  readProjectOgBackground,
} from "@/lib/og-card";
import { caseStudies } from "@/lib/site-content";

function getCaseStudy(slug: string) {
  return caseStudies.find(({ id }) => id === slug);
}

function getImageMetadata(caseStudy: (typeof caseStudies)[number]) {
  return {
    id: caseStudy.id,
    alt: `Case ${caseStudy.title} — Evandro Fonseca Junior`,
    size: OG_SIZE,
    contentType: OG_CONTENT_TYPE,
  };
}

export function generateImageMetadata({
  params,
}: {
  params: { slug?: string };
}) {
  if (!params.slug) {
    return caseStudies.map(getImageMetadata);
  }

  const caseStudy = getCaseStudy(params.slug);
  if (!caseStudy) notFound();
  return [getImageMetadata(caseStudy)];
}

export default async function Image({
  params,
  id,
}: {
  params: Promise<{ slug: string }>;
  id: Promise<string>;
}) {
  const [{ slug }, imageId] = await Promise.all([params, id]);
  const caseStudy = getCaseStudy(slug);
  if (!caseStudy || imageId !== caseStudy.id) notFound();

  return new ImageResponse(
    <OgCard
      eyebrow="Case de engenharia de software"
      title={caseStudy.title}
      description={caseStudy.summary}
      backgroundImage={readProjectOgBackground(caseStudy.id)}
    />,
    OG_SIZE,
  );
}