package main

// merchCardComponent renders a single merch card. The card class is applied
// to a grid container managed by the page; this block stays self-contained.
templ merchCardComponent(data MerchCardData) {
	<article class="relative y2k-bevel rounded-2xl overflow-hidden bg-card flex flex-col" data-block-key="y2k:merch_card">
		if data.Sticker != "" {
			<span class="absolute top-3 right-3 z-10 y2k-button text-xs uppercase tracking-widest">{ stickerLabel(data.Sticker) }</span>
		}
		<div class="aspect-square bg-muted overflow-hidden y2k-image-frame border-0 rounded-none">
			if data.Image != "" {
				<img src={ data.Image } alt={ data.Title } class="w-full h-full object-cover"/>
			} else {
				<div class="w-full h-full flex items-center justify-center text-muted-foreground text-xs uppercase tracking-widest">
					no image
				</div>
			}
		</div>
		<div class="p-4 flex flex-col gap-2 flex-1">
			<h3 class="y2k-heading text-foreground text-lg">{ titleOr(data.Title) }</h3>
			<div class="flex items-center justify-between gap-3 mt-auto">
				<span class="text-foreground font-bold">{ priceOr(data.Price) }</span>
				if data.BuyHref != "" {
					<a href={ templ.SafeURL(data.BuyHref) } class="y2k-button text-sm">buy</a>
				}
			</div>
		</div>
	</article>
}

func stickerLabel(s string) string {
	switch s {
	case "sold-out":
		return "sold out"
	default:
		return s
	}
}

func titleOr(s string) string {
	if s == "" {
		return "untitled"
	}
	return s
}

func priceOr(s string) string {
	if s == "" {
		return "$--"
	}
	return s
}