import { ImageResponse } from "next/og";

// iOS's "Add to Home Screen" doesn't read the web manifest at all - it needs
// its own <link rel="apple-touch-icon">, which only exists if this special
// file (or a literal apple-icon.png) is present. Without it, iOS falls back
// to a screenshot of whatever page was open, not the app's brand mark.
// Mirrors public/icon.svg's existing design (used in the manifest for
// Android/Chrome) as plain positioned divs rather than inline SVG paths,
// since that renders reliably through Satori (next/og's renderer). iOS
// applies its own rounded-square mask on top, so this stays a plain square.
export const size = { width: 180, height: 180 };
export const contentType = "image/png";

export default function AppleIcon() {
  const barStyle = {
    position: "absolute" as const,
    left: "30%",
    width: "40%",
    height: "10%",
    borderRadius: 6,
    background: "#f5c518",
  };

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          position: "relative",
          background: "#0a0a0a",
        }}
      >
        <div style={{ ...barStyle, top: "34%" }} />
        <div style={{ ...barStyle, top: "47%" }} />
        <div style={{ ...barStyle, top: "60%" }} />
      </div>
    ),
    { ...size },
  );
}