package main

// nftGalleryComponent renders a grid of foil-on-hover NFT cards.
templ nftGalleryComponent(data NFTGalleryData) {
	<section class="my-6" data-block-key="y2k:nft_gallery">
		if len(data.Items) == 0 {
			<p class="text-center text-muted-foreground py-12">No items yet.</p>
		} else {
			<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
				for _, item := range data.Items {
					<a
						href={ templ.SafeURL(orHash(item.Href)) }
						class="y2k-foil y2k-bevel block bg-card rounded-xl overflow-hidden no-underline text-foreground"
					>
						<div class="aspect-square bg-muted overflow-hidden">
							if item.Image != "" {
								<img src={ item.Image } alt={ item.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-3 flex items-center justify-between gap-2">
							<span class="font-semibold truncate">{ titleOr(item.Title) }</span>
							if item.Chain != "" {
								<span class="text-xs uppercase tracking-widest text-muted-foreground">{ item.Chain }</span>
							}
						</div>
					</a>
				}
			</div>
		}
	</section>
}