import { readFileSync } from "node:fs";
import { join } from "node:path";
import { ImageResponse } from "next/og";

export const size = { width: 32, height: 32 };
export const contentType = "image/png";

/** Favicon — official ROPTS mark, contain-fit (aspect ratio preserved, never stretched or cropped) on a transparent canvas. */
export default function Icon() {
  const logo = readFileSync(join(process.cwd(), "public/brand/logo.png")).toString("base64");

  return new ImageResponse(
    (
      <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={`data:image/png;base64,${logo}`} width={32} height={21} alt="" />
      </div>
    ),
    { ...size }
  );
}