---
import path from "path";
interface Props {
    id?: string
    src: string;
    class?: string;
    alt?: string
    position?: string;
    basePath?: string
}
import { Image } from 'astro:assets';
import { url } from "../../utils/url-utils";

const {id, src, alt, position = 'center', basePath = '/'} = Astro.props;
const className = Astro.props.class;

const isLocal = !(src.startsWith('/') || src.startsWith('http') || src.startsWith('https') || src.startsWith('data:'));
const isPublic = src.startsWith('/');

// TODO temporary workaround for images dynamic import
// https://github.com/withastro/astro/issues/3373
let img;
if (isLocal) {
    const files = import.meta.glob<ImageMetadata>("../../**", { import: 'default' });
    let normalizedPath = path.normalize(path.join("../../", basePath, src)).replace(/\\/g, "/");
    img = await (files[normalizedPath])();
    if (!img) {
        console.error(`No image found for path ${normalizedPath}`);
    }
}

const imageClass = 'w-full h-full object-cover';
const imageStyle = `object-position: ${position}`
---
<div class:list={[className, 'overflow-hidden relative']}>
    <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
    {isLocal && img && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
    {!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}
</div>