---
// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import "@astrojs/starlight/style/markdown.css";
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";

interface Props {
    imagePath: string;
    imageAlt: string;
    imageWidth: number;
    imageHeight: number;
    needsBackground?: boolean;
    skip?: boolean;
    scale?: number;
}
const {
    imagePath,
    imageAlt,
    skip,
    needsBackground,
    imageWidth: _imageWidth,
    imageHeight: _imageHeight,
} = Astro.props as Props;
const images = import.meta.glob<{ default: ImageMetadata }>(
    "/src/assets/generated/*.{jpeg,jpg,png,gif}",
);

let imageMeta: ImageMetadata | undefined = undefined;
if (imagePath.length > 0) {
    if (!images[imagePath]) {
        throw new Error(
            `"${imagePath}" does not exist in glob: "src/assets/generated/*.{jpeg,jpg,png,gif}"`,
        );
    }
    imageMeta = (await images[imagePath]()).default;
}
const imageCSS = `image-block ${needsBackground ? "screenshot-container" : ""}`;
---

{!skip && <div class="code-image-container">
    <div class="code-block">
        <slot/>
    </div>

    {imageMeta && <div class={imageCSS}>
        <Image
            src={imageMeta}
            alt={imageAlt}
            widths={[120, 200, 320]}
            sizes="(max-width: 600px) 40vw, 200px"
        />
    </div>}
</div>}

