import { imageManifests } from "../image-manifest";

export interface ImageProps {
	size?: number;
	class?: string;
	id?: string;
	[key: string]: unknown;
}

export function Image(
	imageKey: keyof typeof imageManifests,
	props?: ImageProps,
): string {
	const { size, class: className, id, ...additionalAttributes } = props || {};
	const imageManifest = imageManifests[imageKey];

	if (!imageManifest) {
		console.warn(`image manifest not found for key: ${imageKey}`);
		return ""; // todo: add placeholder image
	}

	type Size = (typeof imageManifests)[typeof imageKey]["sizes"][number];
	let bestSize: Size = imageManifest.sizes[0];
	if (size) {
		bestSize = imageManifest.sizes.reduce((prev: Size, curr: Size) => {
			return Math.abs(curr.width - size) < Math.abs(prev.width - size)
				? curr
				: prev;
		});
	}

	const attributes: { [key: string]: string } = {
		src: bestSize.path,
		alt: imageManifest.altText,
	};

	if (className) attributes.class = className as string;
	if (id) attributes.id = id as string;

	for (const key in additionalAttributes) {
		if (key !== "children" && additionalAttributes[key] != null) {
			attributes[key] = String(additionalAttributes[key]);
		}
	}

	const attributesString = Object.entries(attributes)
		.map(([key, value]) => `${key}="${value}"`)
		.join(" ");
	return `<img ${attributesString} />`;
}