---
import CartCount from './CartCount';

const { placeholder } = Astro.props;
let wishlist = 0;
let cart = 0;

if (!placeholder) {
	await new Promise((resolve) => setTimeout(resolve, 3000));
}
---

<a href="#" class="text-center text-gray-700 hover:text-primary transition relative">
	<div class="text-2xl">
		<i class="fa-regular fa-heart"></i>
	</div>
	<div class="text-xs leading-3">Wishlist</div>
	<div
		class="absolute right-0 -top-1 w-5 h-5 rounded-full flex items-center justify-center bg-primary text-white text-xs"
	>
		{wishlist}
	</div>
</a>
<a href="#" class="text-center text-gray-700 hover:text-primary transition relative">
	<div class="text-2xl">
		<i class="fa-solid fa-bag-shopping"></i>
	</div>
	<div class="text-xs leading-3">Cart</div>
	<CartCount client:load count={cart} />
</a>
<a href="#" class="text-center text-gray-700 hover:text-primary transition relative">
	<div class="text-2xl">
		<i class="fa-regular fa-user"></i>
	</div>
	<div class="text-xs leading-3">Account</div>
</a>