---
import type { HTMLAttributes } from "astro/types"
import { classInvertBlack } from "~ui/img/classInvertBlack"
import { classArr } from "~ui/utils/classArr"
import type { ImageType } from "./ImageType"
import Img from "./Img.astro"

interface Props {
  id?: string
  img: ImageType
  zoomIn?: boolean
  invertColorsInDarkMode?: boolean
  class?: string
  srcPrefix?: string
  restProps?: HTMLAttributes<"img">
}
const p = Astro.props
const isSvg = p.img.path.endsWith(".svg")
const imageUrl = (p.srcPrefix ? p.srcPrefix : "") + p.img.path
---

<Img
  id={p.id}
  src={imageUrl}
  alt={p.img.alt}
  class={classArr(p.invertColorsInDarkMode ? classInvertBlack : "", p.class)}
  width={isSvg ? null : p.img.width}
  height={isSvg ? null : p.img.height}
  restProps={p.restProps}
/>