---

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>