---
// An image in a framed box: the same surface, border and radius as an <Example>
// demo, so pictures and demos look alike on a page. Give the image a transparent
// background, or the exact `bg-surface-secondary` color so it blends into the box.
// With `srcDark` the box swaps images with the theme.
// The box draws the frame, so the images drop the border and radius that
// `.prose > figure > img` gives them.
import type { ImageMetadata } from 'astro'
import { Image } from 'astro:assets'

interface Props {
  src: ImageMetadata
  /** version shown in dark mode; without it `src` is shown in both modes */
  srcDark?: ImageMetadata
  alt: string
  /** display width in pixels; the image is also rendered at 2x */
  width?: number
}

const { src, srcDark, alt, width = 480 } = Astro.props
---

<figure class="d-flex justify-content-center my-5 border rounded bg-surface-secondary overflow-hidden">
  <Image src={src} alt={alt} width={width} densities={[1, 2]} class:list={['border-0 rounded-0', srcDark && 'hide-theme-dark']} />
  {srcDark && <Image src={srcDark} alt={alt} width={width} densities={[1, 2]} class="border-0 rounded-0 hide-theme-light" />}
</figure>