---
import freeIllustrations from '@data/free-illustrations.json'

interface Props {
  /** file name of the illustration, e.g. "boy-girl.svg" (the ".svg" suffix is stripped) */
  image: string
  height?: number | string
  class?: string
}

const { image, height = 128, class: className } = Astro.props

const key = image.replaceAll('.svg', '')
const source = (freeIllustrations as { autodark: Record<string, string> }).autodark[key] ?? ''

const replaceTo = `<svg class="img${className ? ` ${className}` : ''}" `
let illustration = source.replaceAll('<svg ', replaceTo)

illustration = illustration.replaceAll('width="800" height="600"', `height="${height}"`)
---

<!-- BEGIN ILLUSTRATION -->
<Fragment set:html={illustration} />
<!-- END ILLUSTRATION -->