import { ImageResponse } from "next/og";

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

export default function AppleIcon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "#047857",
          borderRadius: 40,
        }}
      >
        <div
          style={{
            position: "relative",
            display: "flex",
            width: 132,
            height: 132,
          }}
        >
          <div
            style={{
              position: "absolute",
              left: 2,
              top: 8,
              width: 56,
              height: 100,
              background: "#fff",
              borderRadius: "12px 0 0 12px",
            }}
          />
          <div
            style={{
              position: "absolute",
              left: 58,
              top: 8,
              width: 14,
              height: 100,
              background: "#6ee7b7",
            }}
          />
          <div
            style={{
              position: "absolute",
              left: 72,
              top: 8,
              width: 52,
              height: 100,
              background: "#a7f3d0",
              borderRadius: "0 12px 12px 0",
            }}
          />
          <div
            style={{
              position: "absolute",
              right: 0,
              bottom: 0,
              width: 68,
              height: 68,
              borderRadius: "50%",
              background: "#f59e0b",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <div
              style={{
                width: 40,
                height: 40,
                borderRadius: "50%",
                border: "6px solid #fffbeb",
              }}
            />
          </div>
        </div>
      </div>
    ),
    { ...size },
  );
}