package main

// coffeeImageComponent renders an image with the torn-edge frame and an
// optional caption styled like a handwritten note.
templ coffeeImageComponent(src, alt, caption string) {
	<figure class="my-8 flex flex-col items-center coffee-body">
		<div class="coffee-frame p-2 bg-card rounded-sm relative coffee-torn-bottom">
			if src != "" {
				<img src={ src } alt={ alt } class="block max-w-full h-auto" loading="lazy"/>
			} else {
				<div class="w-full h-48 flex items-center justify-center coffee-body text-sm text-muted-foreground italic px-6">
					Add an image to render the torn-edge frame.
				</div>
			}
		</div>
		if caption != "" {
			<figcaption class="coffee-display italic text-center text-sm text-muted-foreground mt-3">{ caption }</figcaption>
		}
	</figure>
}