import { ImageResponse } from 'next/og';
import { MARK_DARK, MarkImg } from '@/components/brand/mark';

/**
 * Square PNG app icon (manifest 192 / 512) drawn from the atlas-plate mark — same geometry as `icon.svg` and `apple-icon.tsx`.
 * The plate fills the tile (maskable-safe: the graph sits inside the central 80 %). Raw hex is unavoidable in ImageResponse.
 */
export function renderIcon(px: number): ImageResponse {
  return new ImageResponse(
    (
      <div style={{ width: px, height: px, display: 'flex', alignItems: 'center', justifyContent: 'center', background: MARK_DARK.plate }}>
        <MarkImg px={px} colors={{ ...MARK_DARK, plate: '#12151b' }} radius={px >= 512 ? 5 : 6} />
      </div>
    ),
    { width: px, height: px, headers: { 'cache-control': 'public, max-age=86400, s-maxage=86400' } },
  );
}