import { ImageResponse } from 'next/og'
import { BrandBadge } from '@/lib/ogImage'

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

// iOS masks apple-touch-icon into a rounded square over a solid background —
// unlike the browser favicon, this can't be a badge floating on transparency.
export default function AppleIcon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          background: '#123238',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <BrandBadge size={140} />
      </div>
    ),
    size
  )
}