import { ImageResponse } from "next/og"
import themes from "@/lib/themes.js"
import Lock from "@/icons/lock.js"

export default async function OGImageLocked ({ theme }) {
  const themeData = themes[theme]
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          color: themeData.color,
          backgroundColor: themeData.background,
          fontSize: 24,
          padding: 20,
          width: "100%",
          height: "100%",
        }}
      >
        <Lock bg={themeData.background} fg={themeData.color} width={480} height={480} />
      </div>
    )
  )
}