package main

// initials returns up to two uppercase initials for a name. Used as an avatar
// fallback so the card renders cleanly when no portrait is provided.
func initials(name string) string {
	if name == "" {
		return ""
	}
	out := []rune{}
	prevSpace := true
	for _, r := range name {
		if r == ' ' {
			prevSpace = true
			continue
		}
		if prevSpace {
			if r >= 'a' && r <= 'z' {
				r -= 32
			}
			out = append(out, r)
			prevSpace = false
			if len(out) >= 2 {
				break
			}
		}
	}
	return string(out)
}

// testimonialSoftComponent renders the deckle-edged testimonial card.
templ testimonialSoftComponent(data TestimonialSoftData) {
	<figure class="pastel-card deckle-edge p-8 max-w-xl mx-auto" data-block="pastel-dream:testimonial-soft">
		if data.Rating > 0 {
			<div class="flex gap-1 mb-4" aria-label="Rating">
				for i := 0; i < data.Rating; i++ {
					<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: hsl(var(--accent));">
						<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
					</svg>
				}
			</div>
		}
		<blockquote class="font-body text-lg leading-relaxed" style="color: hsl(var(--card-foreground));">
			@templ.Raw(data.Quote)
		</blockquote>
		if data.Name != "" || data.Role != "" {
			<figcaption class="flex items-center gap-4 mt-6 pt-6 border-t" style="border-color: hsl(var(--border));">
				if data.Avatar != "" {
					<img src={ data.Avatar } alt={ data.Name } class="w-12 h-12 rounded-full object-cover"/>
				} else if data.Name != "" {
					<span class="w-12 h-12 rounded-full flex items-center justify-center font-display text-lg" style="background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));">
						{ initials(data.Name) }
					</span>
				}
				<div>
					if data.Name != "" {
						<p class="font-display text-xl leading-tight" style="color: hsl(var(--foreground));">{ data.Name }</p>
					}
					if data.Role != "" {
						<p class="font-body text-sm" style="color: hsl(var(--muted-foreground));">{ data.Role }</p>
					}
				</div>
			</figcaption>
		}
	</figure>
}