package main

import "git.dev.alexdunmow.com/block/core/blocks"

// storybookQuoteComponent renders a quote with optional illustration.
templ storybookQuoteComponent(data StorybookQuoteData) {
	<section class="kg-section" data-block="kindergarten:storybook_quote">
		<div class="kg-container">
			<figure class="kg-storybook">
				<blockquote style="margin: 0;">
					if data.Quote != "" {
						<p class="kg-storybook-quote">"{ data.Quote }"</p>
					} else {
						<p class="kg-storybook-quote" data-empty="true">Add a quote to inspire your readers.</p>
					}
					if data.Author != "" {
						<figcaption class="kg-storybook-author">— { data.Author }</figcaption>
					}
				</blockquote>
				<div>
					if data.Illustration != "" {
						<img class="kg-storybook-illustration" src={ blocks.ResolveMediaPath(data.Illustration) } alt={ "Illustration accompanying the quote" } />
					} else {
						@storybookFallbackIllustration()
					}
				</div>
			</figure>
		</div>
	</section>
}

// storybookFallbackIllustration renders a friendly SVG when no illustration
// is supplied. It guarantees a visible, themed graphic instead of a broken
// image icon.
templ storybookFallbackIllustration() {
	<svg viewBox="0 0 200 150" width="100%" height="auto" class="kg-storybook-illustration" role="img" aria-label="Storybook illustration">
		<rect width="200" height="150" rx="24" fill="hsl(var(--muted))" />
		<circle cx="60" cy="60" r="20" fill="hsl(var(--accent))" />
		<rect x="100" y="40" width="60" height="40" rx="8" fill="hsl(var(--primary))" />
		<path d="M 30 110 Q 100 90 170 110 L 170 130 L 30 130 Z" fill="hsl(var(--secondary))" />
	</svg>
}