package main

// pullQuoteComponent renders a pull quote anchored by an accent color bar.
// The accent value drives the data-mb-accent attribute, which the appended
// CSS uses to colour the .mb-quote-bar regardless of the active preset.
templ pullQuoteComponent(data PullQuoteData) {
	<aside data-block="magazine-bold:pull_quote" data-mb-accent={ data.Accent } class="my-8 grid grid-cols-12 gap-4 items-start">
		<div class="mb-quote-bar col-span-1 h-full min-h-[3rem]"></div>
		<blockquote class="col-span-11 mb-quote-text">
			<p class="font-display text-deck">
				if data.Quote != "" {
					@templ.Raw(data.Quote)
				}
			</p>
			if data.Attribution != "" {
				<cite class="block mt-4 font-mono text-kicker text-muted-foreground not-italic">— { data.Attribution }</cite>
			}
		</blockquote>
	</aside>
}