// src/index.tsx
import React from "react";
import { ImageResponse, GoogleFont, cache, defaultFont } from "@cf-wasm/og";

export type Env = Readonly<{}>;

const worker: ExportedHandler<Env> = {
  async fetch(request, env, ctx) {
    // Make sure to overwrite the cache.waitUntil function
    cache.waitUntil = ctx.waitUntil.bind(ctx);

    // Sets default font to `Inter` from Google Fonts
    // defaultFont.set(
    //   new GoogleFont("Inter")
    // );

    const { searchParams } = new URL(request.url);
    const parameters = Object.fromEntries(searchParams.entries());

    const response = new ImageResponse(
      (
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            width: "100%",
            height: "100%",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#6f90ab",
            fontSize: "2rem",
            color: "#fff"
          }}
        >
          <span>Noto Sans (Default Font)</span>
          <span
            style={{
              fontFamily: "JetBrains Mono"
            }}
          >
            JetBrains Mono (using GoogleFont class)
          </span>
          <span>These are emojis: 😎🌩️</span>
          <span
            style={{
              fontFamily: "JetBrains Mono"
            }}
          >
            Parameters: {JSON.stringify(parameters)}
          </span>
        </div>
      ),
      {
        fonts: [new GoogleFont("JetBrains Mono")],
        emoji: "fluent"
      }
    );

    return response;
  }
};

export default worker;