---
const { wine, cellarApiUrl } = Astro.props;
---

<a
	href={`/cellar/${wine.short_id}`}
	class="flex items-center gap-4 py-3 border-b border-[#333] no-underline hover:opacity-70 transition-opacity"
>
	<div class="flex-shrink-0 w-20 h-20">
		<img
			src={`${cellarApiUrl}/api/wines/${wine.short_id}/pentagon.svg`}
			alt={`${wine.name} taste profile`}
			width="80"
			height="80"
			style="width:80px;height:80px;object-fit:contain;"
			loading="lazy"
		/>
	</div>
	<div class="flex flex-col gap-0.5">
		<span class="text-base">{wine.name}</span>
		<span class="text-xs opacity-50">{wine.origin}{wine.grape ? ` · ${wine.grape}` : ""}</span>
	</div>
</a>