package main

// earthenImageComponent renders an image inside a paper-grain frame, with an optional handwritten caption.
templ earthenImageComponent(src, alt, caption string) {
	<figure class="earthen-image my-8 mx-auto" style="max-width: 100%;">
		if src != "" {
			<div
				class="earthen-paper-frame-inner rounded-lg overflow-hidden"
				style="border: 1px solid hsl(var(--border)); padding: 6px; background-color: hsl(var(--card));"
			>
				<img
					src={ resolveMedia(src) }
					alt={ alt }
					class="w-full h-auto rounded-md"
				/>
			</div>
		} else {
			<div
				data-empty="true"
				class="earthen-image-empty w-full h-48 rounded-lg flex items-center justify-center"
				style="background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1.5px dashed hsl(var(--border));"
			>
				<span class="text-sm">Choose an image to display here</span>
			</div>
		}
		if caption != "" {
			<figcaption
				class="earthen-caption text-center text-sm mt-3"
				style="color: hsl(var(--muted-foreground)); font-style: italic;"
			>
				{ caption }
			</figcaption>
		}
	</figure>
}