package main

// earthenCardComponent renders a card with soft radius and ink-edge border.
templ earthenCardComponent(data EarthenCardData) {
	<article
		class="earthen-card rounded-xl overflow-hidden p-6"
		data-empty?={ data.Empty }
		style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.4);"
	>
		if data.Image != "" {
			<div class="earthen-card-image -mx-6 -mt-6 mb-4 overflow-hidden">
				<img src={ resolveMedia(data.Image) } alt={ data.Title } class="w-full h-auto"/>
			</div>
		}
		if data.Title != "" {
			<h3
				class="earthen-card-title text-2xl mb-3"
				style={ "font-family: var(--font-heading, \"Fraunces\", \"Playfair Display\", Georgia, serif); color: hsl(var(--primary));" }
			>
				{ data.Title }
			</h3>
		}
		if data.Body != "" {
			<div
				class="earthen-card-body mb-4"
				style={ "font-family: var(--font-body, \"Spectral\", Georgia, serif); color: hsl(var(--foreground));" }
			>
				@templ.Raw(data.Body)
			</div>
		}
		if data.Link != "" {
			<a
				href={ templ.SafeURL(data.Link) }
				class="earthen-card-link inline-flex items-center gap-2 font-semibold"
				style="color: hsl(var(--accent));"
			>
				if data.LinkLabel != "" {
					<span>{ data.LinkLabel }</span>
				} else {
					<span>Read more</span>
				}
				<span aria-hidden="true">→</span>
			</a>
		}
	</article>
}