---
import "../styles/components/HoverCard.css";
const {title, description, image = "", date} = Astro.props;
---

<article class="hover-card">
	<div class="image-container">
		<img class="card-image" src={image} alt={title} />
	</div>

	<div class="hover-text">
		<div>
			<p set:html={description} />
		</div>
	</div>
</article>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const hoverCards = document.querySelectorAll('.hover-card');
		
		hoverCards.forEach(card => {
			card.addEventListener('click', (e) => {
				// Only toggle on mobile devices
				if (window.innerWidth <= 768) {
					e.preventDefault();
					
					// Close all other active cards first
					hoverCards.forEach(otherCard => {
						if (otherCard !== card) {
							otherCard.classList.remove('active');
						}
					});
					
					// Toggle current card
					card.classList.toggle('active');
				}
			});

			// Close card when clicking outside (mobile only)
			document.addEventListener('click', (e) => {
				if (window.innerWidth <= 768 && !card.contains(e.target as Node)) {
					card.classList.remove('active');
				}
			});
		});
	});
</script>